/* Parmis Sun — static site styles */

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

:root{
  --radius: 1rem;

  --navy-deep: #16202f;
  --navy: #1c2839;
  --teal: #4f8a94;
  --cyan: #7fc4c9;

  --background: #0c121c;
  --foreground: #f5f6f7;
  --card: #1c2839;
  --muted-foreground: #a9b3bd;
  --accent: #7fc4c9;
  --accent-foreground: #10161f;
  --primary-foreground: #0d1420;
  --destructive: #d1483f;
  --border: rgba(255,255,255,0.12);

  --gradient-brand: linear-gradient(135deg, var(--teal), var(--cyan));
  --gradient-panel: linear-gradient(160deg, #263a52, #182231);
  --gradient-hero: linear-gradient(100deg, rgba(13,19,30,0.96) 0%, rgba(13,19,30,0.82) 45%, rgba(13,19,30,0.35) 100%);
  --shadow-soft: 0 18px 50px -24px rgba(0,0,0,0.75);
  --shadow-glow: 0 24px 70px -28px rgba(127,196,201,0.55);
  --transition-smooth: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  margin:0;
  background-color:var(--background);
  color:var(--foreground);
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{
  max-width:100%;
  display:block;
}

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

ul{
  list-style:none;
  margin:0;
  padding:0;
}

h1,h2,h3,h4{
  font-family:'Sora',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-0.02em;
  margin:0;
}

.section-shell{
  margin-inline:auto;
  width:100%;
  max-width:80rem;
  padding-inline:1.25rem;
}

@media (min-width:768px){
  .section-shell{
    padding-inline:2rem;
  }
}

.text-gradient-brand{
  background-image:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.panel-card{
  background-image:var(--gradient-panel);
  border:1px solid var(--border);
  border-radius:1.75rem;
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition-smooth),box-shadow var(--transition-smooth),border-color var(--transition-smooth);
}

.panel-card:hover{
  transform:translateY(-6px);
  border-color:rgba(127,196,201,0.45);
  box-shadow:var(--shadow-glow);
}

/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  white-space:nowrap;
  border-radius:0.75rem;
  font-size:0.95rem;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all 300ms ease;
  height:3.25rem;
  padding:0 1.75rem;
}

.btn svg{
  width:1rem;
  height:1rem;
  flex-shrink:0;
}

.btn-brand{
  background-image:var(--gradient-brand);
  color:var(--primary-foreground);
  box-shadow:var(--shadow-soft);
}

.btn-brand:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-glow);
}

.btn-brand:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.btn-outline{
  border:1px solid rgba(127,196,201,0.5);
  background:transparent;
  color:var(--accent);
}

.btn-outline:hover{
  transform:translateY(-2px);
  background:rgba(127,196,201,0.1);
}

.btn-sm{
  height:2.25rem;
  padding:0 1rem;
  font-size:0.85rem;
  border-radius:0.6rem;
}

/* =========================
   ICON BADGES
========================= */

.icon-badge{
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:1rem;
}

/* =========================
   HEADER / NAVBAR
   ALWAYS DARK
   ALWAYS FIXED
========================= */

.site-header{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
  background:#0c121c !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  transition:none;
}

.site-header.scrolled{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  background:#0c121c !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
}

.site-header nav{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1rem 0;
}

.brand-link{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-width:0;
}

.brand-link img{
  height:4.4rem;
  width:auto;
  object-fit:contain;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.nav-links{
  display:none;
  align-items:center;
  gap:1.75rem;
}

.nav-links a{
  font-size:0.9rem;
  font-weight:500;
  color:var(--muted-foreground);
  transition:color .2s;
}

.nav-links a:hover{
  color:var(--accent);
}

.nav-cta{
  display:none;
}

.menu-btn{
  display:grid;
  place-items:center;
  height:2.5rem;
  width:2.5rem;
  border:1px solid var(--border);
  border-radius:0.75rem;
  background:#16202f;
  color:var(--foreground);
  cursor:pointer;
}

/* FIX: Prevent SVG from blocking click events on mobile devices */
.menu-btn svg {
  pointer-events: none;
}

.mobile-menu{
  display:none;
  border-top:1px solid var(--border);
  background:#0c121c !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.mobile-menu.open{
  display:block;
}

.mobile-menu ul{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  padding:1rem 1.25rem;
}

.mobile-menu a{
  display:block;
  border-radius:0.75rem;
  padding:0.75rem;
  font-size:0.9rem;
  font-weight:500;
  color:var(--muted-foreground);
}

.mobile-menu a:hover{
  background:var(--card);
  color:var(--accent);
}

@media (min-width:640px){
  .nav-cta{
    display:inline-flex;
  }
}

@media (min-width:1024px){
  .nav-links{
    display:flex;
  }
  .menu-btn{
    display:none;
  }
  .mobile-menu{
    display:none !important;
  }
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
  isolation:isolate;
  min-height:92vh;
  width:100%;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background-image:var(--gradient-hero);
}

.hero-inner{
  position:relative;
  display:flex;
  min-height:92vh;
  flex-direction:column;
  justify-content:center;
  padding-block:8rem;
}

.eyebrow{
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:0.5rem;
  border-radius:999px;
  border:1px solid rgba(127,196,201,0.4);
  background:rgba(127,196,201,0.1);
  padding:0.4rem 1rem;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.18em;
  color:var(--accent);
  text-transform:uppercase;
}

.eyebrow svg{
  width:0.85rem;
  height:0.85rem;
}

.hero h1{
  margin-top:1.75rem;
  max-width:56rem;
  font-size:2.25rem;
  line-height:1.05;
  font-weight:800;
}

.hero p.lead{
  margin-top:1.5rem;
  max-width:42rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-foreground);
}

.hero-actions{
  margin-top:2.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
}

.stats{
  margin-top:4rem;
  display:grid;
  max-width:42rem;
  grid-template-columns:1fr;
  gap:1rem;
}

.stat-card{
  border-radius:1rem;
  border:1px solid var(--border);
  background:rgba(28,40,57,0.5);
  padding:1.25rem;
  backdrop-filter:blur(4px);
}

.stat-card dt{
  font-family:'Sora',sans-serif;
  font-size:1.875rem;
  font-weight:700;
  color:var(--accent);
}

.stat-card dd{
  margin:0.25rem 0 0;
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--muted-foreground);
  text-transform:uppercase;
}

@media (min-width:640px){
  .hero h1{
    font-size:3.75rem;
  }
  .hero p.lead{
    font-size:1.125rem;
  }
  .stats{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:1024px){
  .hero h1{
    font-size:4.5rem;
  }
}

/* =========================
   SECTION HEADINGS
========================= */

.eyebrow-label{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  color:var(--accent);
  text-transform:uppercase;
}

.section-heading{
  margin-top:1rem;
  font-size:1.875rem;
  font-weight:700;
}

.section-lead{
  margin-top:1.25rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-foreground);
}

@media (min-width:640px){
  .section-heading{
    font-size:3rem;
  }
}

section{
  padding-block:6rem;
}

.panel-bg{
  background-image:var(--gradient-panel);
}

/* =========================
   ABOUT
========================= */

.about-grid{
  display:grid;
  align-items:center;
  gap:3.5rem;
}

.about-list{
  margin-top:2rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  padding:0;
}

.about-list li{
  display:flex;
  align-items:flex-start;
  gap:0.75rem;
  font-size:0.9rem;
  color:rgba(245,246,247,0.9);
}

.about-list svg{
  margin-top:0.15rem;
  width:1.25rem;
  height:1.25rem;
  flex-shrink:0;
  color:var(--accent);
}

.about-media{
  overflow:hidden;
  border-radius:1.5rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}

.about-media:hover img{
  transform:scale(1.05);
}

@media (min-width:1024px){
  .about-grid{
    grid-template-columns:1fr 1fr;
  }
}

/* =========================
   CARDS
========================= */

.cards-4{
  margin-top:3.5rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
}

@media (min-width:640px){
  .cards-4{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:1024px){
  .cards-4{
    grid-template-columns:repeat(4,1fr);
  }
}

.service-card{
  display:flex;
  flex-direction:column;
  padding:1.75rem;
}

.service-icon{
  height:3.5rem;
  width:3.5rem;
  background-image:var(--gradient-brand);
  color:var(--primary-foreground);
  transition:transform .3s ease;
}

.service-icon svg{
  width:1.5rem;
  height:1.5rem;
}

.service-card:hover .service-icon{
  transform:scale(1.1);
}

.service-card h3{
  margin-top:1.5rem;
  font-size:1.125rem;
  font-weight:700;
}

.service-card p{
  margin-top:0.75rem;
  font-size:0.9rem;
  line-height:1.6;
  color:var(--muted-foreground);
}

.cards-2{
  margin-top:3.5rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
}

@media (min-width:1024px){
  .cards-2{
    grid-template-columns:1fr 1fr;
  }
}

.vm-card{
  padding:2.25rem;
}

.vm-icon{
  height:3.5rem;
  width:3.5rem;
  border:1px solid rgba(127,196,201,0.4);
  background:rgba(127,196,201,0.1);
  color:var(--accent);
}

.vm-icon svg{
  width:1.5rem;
  height:1.5rem;
}

.vm-card h3{
  margin-top:1.5rem;
  font-size:1.5rem;
  font-weight:700;
}

.vm-card p{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-foreground);
}

.reasons-grid{
  margin-top:3.5rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
}

@media (min-width:640px){
  .reasons-grid{
    grid-template-columns:1fr 1fr;
  }
}

.reason-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:flex-start;
  gap:1.25rem;
  padding:1.75rem;
}

.reason-icon{
  height:3rem;
  width:3rem;
  background:rgba(127,196,201,0.1);
  color:var(--accent);
}

.reason-icon svg{
  width:1.25rem;
  height:1.25rem;
}

.reason-card h3{
  font-size:1.125rem;
  font-weight:700;
}

.reason-card p{
  margin-top:0.5rem;
  font-size:0.9rem;
  line-height:1.6;
  color:var(--muted-foreground);
}

/* =========================
   CTA
========================= */

.cta-panel{
  position:relative;
  overflow:hidden;
  padding:2.5rem 1.5rem;
  text-align:center;
}

.cta-glow{
  pointer-events:none;
  position:absolute;
  top:-6rem;
  right:-6rem;
  height:18rem;
  width:18rem;
  border-radius:999px;
  opacity:0.25;
  filter:blur(64px);
  background-image:var(--gradient-brand);
}

.cta-panel h2{
  position:relative;
  font-size:1.875rem;
  font-weight:700;
}

.cta-panel p{
  position:relative;
  margin:1.25rem auto 0;
  max-width:42rem;
  font-size:1rem;
  line-height:1.65;
  color:var(--muted-foreground);
}

.cta-actions{
  position:relative;
  margin-top:2.25rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.75rem;
}

@media (min-width:640px){
  .cta-panel{
    padding:4rem;
  }
  .cta-panel h2{
    font-size:3rem;
  }
}

/* =========================
   CONTACT
========================= */

.contact-grid{
  margin-top:3.5rem;
  display:grid;
  gap:1.5rem;
}

@media (min-width:1024px){
  .contact-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  }
}

.contact-cards{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  padding:1.5rem;
}

.contact-icon{
  height:2.75rem;
  width:2.75rem;
  background:rgba(127,196,201,0.1);
  color:var(--accent);
}

.contact-icon svg{
  width:1.25rem;
  height:1.25rem;
}

.contact-card p.label{
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--muted-foreground);
  text-transform:uppercase;
  margin:0;
}

.contact-card p.value{
  margin:0.25rem 0 0;
  font-size:0.9rem;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.contact-card p.extra{
  margin:0.1rem 0 0;
  font-size:0.78rem;
  color:var(--muted-foreground);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.contact-form-panel{
  padding:1.75rem;
}

@media (min-width:640px){
  .contact-form-panel{
    padding:2.25rem;
  }
}

.form-grid{
  display:grid;
  gap:1.25rem;
}

.form-row{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}

@media (min-width:640px){
  .form-row{
    grid-template-columns:1fr 1fr;
  }
}

.field{
  display:grid;
  gap:0.5rem;
}

.field label{
  font-size:0.72rem;
  letter-spacing:0.05em;
  color:var(--muted-foreground);
  text-transform:uppercase;
}

.field input,
.field textarea{
  width:100%;
  border-radius:0.6rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--foreground);
  padding:0.6rem 0.85rem;
  font-size:0.9rem;
  font-family:inherit;
}

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
}

.field textarea{
  resize:vertical;
}

.field-error{
  font-size:0.75rem;
  color:var(--destructive);
  margin:0;
}

.form-msg-error{
  font-size:0.9rem;
  color:var(--destructive);
}

.thanks{
  display:flex;
  min-height:18rem;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.thanks svg{
  width:3.5rem;
  height:3.5rem;
  color:var(--accent);
}

.thanks h3{
  margin-top:1.25rem;
  font-size:1.5rem;
  font-weight:700;
}

.thanks p{
  margin-top:0.75rem;
  max-width:28rem;
  font-size:0.9rem;
  color:var(--muted-foreground);
}

.spin{
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================
   FOOTER
========================= */

footer{
  border-top:1px solid var(--border);
  padding-block:3.5rem;
}

.footer-grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
}

@media (min-width:1024px){
  .footer-grid{
    grid-template-columns:1.4fr 1fr 1fr;
  }
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.footer-brand img{
  height:3.5rem;
  width:2.75rem;
  border-radius:0.75rem;
  object-fit:cover;
}

.footer-brand span{
  font-family:'Sora',sans-serif;
  font-size:1rem;
  font-weight:700;
}

.footer-col h3{
  font-size:0.9rem;
  font-weight:600;
}

.footer-col ul{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.footer-col ul li,
.footer-col p{
  font-size:0.9rem;
  color:var(--muted-foreground);
}

.footer-col a{
  transition:color .2s;
}

.footer-col a:hover{
  color:var(--accent);
}

.footer-bottom{
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  border-top:1px solid var(--border);
  padding-top:1.5rem;
  font-size:0.75rem;
  color:var(--muted-foreground);
}

@media (min-width:640px){
  .footer-bottom{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

/* =========================
   NEW SECTIONS (INDUSTRIES)
========================= */

.industries-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.industry-chip {
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: rgba(127, 196, 201, 0.08);
  border: 1px solid rgba(127, 196, 201, 0.25);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--foreground);
  transition: all 0.2s ease;
}

.industry-chip:hover {
  background: rgba(127, 196, 201, 0.15);
  border-color: var(--accent);
  transform: translateY(-2px);
}