:root{
  --bg:#0b0d12;
  --card:rgba(18,21,33,.85);
  --border:rgba(255,255,255,.08);
  --text:#f3f4f6;
  --muted:#a1a1aa;
  --purple:#6d5bd0;
  --purple-soft:#8b7cff;
  --radius:22px;
  --shadow:0 30px 80px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(109,91,208,.22), transparent 60%),
    linear-gradient(180deg,#0b0d12,var(--bg));
  color:var(--text);
  line-height:1.6;
}

/* global mountain overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(6,8,18,.05) 0%,
      rgba(6,8,18,.20) 40%,
      rgba(6,8,18,.45) 70%,
      rgba(6,8,18,.70) 100%
    ),
    url("mountains.png") center 130px / 1400px auto no-repeat;
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}

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

.container{
  width:min(1100px, calc(100% - 40px));
  margin:auto;
}
/* space below header for page hero cards */
main > .card:first-child{
  margin-top:40px;
}
/* consistent spacing between sticky header and first content block */
main{
  padding-top:40px;
}

/* ================= HEADER ================= */
header{
  position:sticky;
  top:0;
  z-index:100;
  height:60px;

  backdrop-filter:blur(2px);

  background:
    linear-gradient(
      180deg,
      rgba(46,48,78,.96) 0%,
      rgba(32,34,56,.90) 55%,
      rgba(18,20,30,.95) 100%
    );

  /* 👇 soft inner glow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.35);

  border-bottom:0;
}



/* layout */
.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:1;
}

/* Brand */
.brand{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.06em;
  font-size:15px;
  text-transform:uppercase;
  transition:opacity .2s ease;
}

.brand:hover{opacity:.85}

/* Nav */
.nav a{
  color:rgba(255,255,255,.75);
  text-decoration:none;
  margin-left:14px;
  font-weight:500;
  position:relative;
}

.nav a:hover,
.nav a.active{
  color:rgba(255,255,255,.95);
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--purple),var(--purple-soft));
  transform:scaleX(0);
  transition:.25s;
}

.nav a:hover::after,
.nav a.active::after{
  transform:scaleX(1);
}

/* ================= CARDS ================= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ================= HERO ================= */
.hero{
  text-align:center;
  padding:56px 32px;
  margin-top:40px;
}

.hero img{
  width:min(680px,92%);
  margin:0 auto 28px;
}

.hero h1{
  font-size:clamp(30px,4vw,44px);
}

.hero p{
  color:var(--muted);
  max-width:640px;
  margin:12px auto 28px;
}

/* ================= PILLS ================= */
.pills{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

.pill{
  padding:12px 22px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-decoration:none;
  transition:.25s;
}

.pill.primary{
  background:linear-gradient(135deg,var(--purple),var(--purple-soft));
  color:white;
}

.pill:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(109,91,208,.35);
}


/* ================= SERVICES ================= */
.service{
  border-top:1px solid var(--border);
}

.service:first-child{
  border-top:none;
}

.service button{
  width:100%;
  background:rgba(255,255,255,.02);
  border:none;
  color:var(--text);
  text-align:left;
  padding:20px 18px;
  font-size:16px;
  font-weight:500;
  cursor:pointer;

  display:flex;
  justify-content:space-between;
  align-items:center;

  transition:
    background .25s ease,
    transform .2s ease;
}

/* subtle hover reaction */
.service button:hover{
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}

/* arrow */
.service button::after{
  content:"›";
  font-size:22px;
  opacity:.6;
  transition:
    transform .25s ease,
    opacity .25s ease;
}

/* arrow rotates when open */
.service button.active::after{
  transform:rotate(90deg);
  opacity:1;
}

/* accordion content */
.service-content{
  max-height:0;
  overflow:hidden;
  padding:0 18px;
  color:var(--muted);
  transition:max-height .35s ease;
}

/* ================= CONTACT ================= */
form{display:grid;gap:14px}

input,textarea{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  color:var(--text);
}

textarea{min-height:120px}

footer{
  text-align:center;
  padding:32px 0;
  color:var(--muted);
  font-size:14px;
}

/* ================= MOBILE ================= */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .nav{font-size:14px}
}
/* ================= SERVICES – HOVER INTERACTION ================= */

.service button{
  position: relative;

  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

/* main hover effect */
.service button:hover{
  background: rgba(255,255,255,.045);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(109,91,208,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* arrow micro-movement */
.service button::after{
  transition: transform .25s ease, opacity .25s ease;
}

.service button:hover::after{
  transform: translateX(4px);
  opacity: 1;
}

/* service icons */
.service-icon{
  width:50px;       /* 👈 bigger icon */
  height:50px;
  flex-shrink:0;
  opacity:.98;
}
/* icon glow on hover */
.service button:hover .service-icon{
  filter:
    drop-shadow(0 0 6px rgba(109,91,208,.45))
    drop-shadow(0 0 14px rgba(139,124,255,.25));
  opacity:1;
}
footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 0;
  color:var(--muted);
  font-size:14px;
}

.footer-linkedin img{
  height:20px;
  opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}

.footer-linkedin:hover img{
  opacity:1;
  transform:translateY(-1px);
}
.footer-divider{
  width:1px;
  height:18px;
  background:rgba(255,255,255,.35);
}
.brand-logo{
  height:17px;
  width:auto;
  display:block;

  transition:
    transform .25s ease,
    filter .25s ease,
    opacity .25s ease;
}

/* hover animation + glow */
.brand:hover .brand-logo{
  transform: translateY(-1px) scale(1.03);
  opacity: 1;

  filter:
    drop-shadow(0 0 6px rgba(155,135,255,.55))
    drop-shadow(0 0 14px rgba(109,91,208,.35));
}
/* =========================================================
   ABOUT PAGE — CLEAN, STABLE, NO-CONFLICT VERSION
   ========================================================= */

/* ---------- GLOBAL ABOUT RESET ---------- */
.about-page,
.about-page * ,
.about-page *::before,
.about-page *::after{
  animation: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---------- PAGE WRAPPER ---------- */
.about-page{
  text-align: center;
  padding-bottom: 120px;
}

/* ---------- HERO / INTRO ---------- */
.about-intro-text{
  position: relative;
  max-width: 1100px;
  margin: 80px auto 40px;
  padding: 80px 40px 70px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* GRAPH BACKGROUND — HARD FORCED */
.about-intro-text::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(11,13,18,.80) 0%,
      rgba(11,13,18,.55) 50%,
      rgba(11,13,18,.80) 100%
    ),
    url("graph.png") center 55% / 240% auto no-repeat;

  opacity: .9;               /* 👈 GRAPH IS VISIBLE */
  pointer-events:none;
  z-index:0;
}

/* Ensure text is above graph */
.about-intro-text > *{
  position: relative;
  z-index: 1;
}

/* ---------- HERO TYPOGRAPHY ---------- */
.about-page h1{
  font-size: clamp(42px, 5vw, 58px);
  margin-bottom: 28px;
  color: #fff;
}

.about-page p{
  font-size: 19px;
  line-height: 1.85;
  max-width: 980px;
  margin: 0 auto;
  color: rgba(255,255,255,.95);
}

/* ---------- BLOCKS DIVIDER ---------- */
.about-divider{
  display:flex;
  justify-content:center;
  margin: 50px 0 70px; /* 👈 closer to hero + features */
}

.about-divider img{
  width: 720px;          /* 👈 BIGGER */
  max-width: 90%;
  opacity: 1;            /* 👈 NOT FADED */
  filter: none;
}

/* ---------- FEATURES SECTION ---------- */
.features{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 36px;             /* 👈 CLEAN SPACING */
}

/* FEATURE BOX */
.feature{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 54px 46px;    /* 👈 FILLS THE BOX */
  text-align: center;
}

/* FEATURE TEXT */
.feature strong{
  display:block;
  font-size: 24px;
  margin-bottom: 16px;
  color: #fff;
}

.feature{
  font-size: 19px;
  line-height: 1.75;
  color: rgba(255,255,255,.92);
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px){
  .about-intro-text{
    padding: 64px 28px;
  }

  .about-divider img{
    width: 90%;
  }

  .feature{
    padding: 42px 30px;
  }
}
/* ================= ABOUT FEATURES – FORCE SPACING ================= */

.about-page .features{
  display: block !important;
}

.about-page .feature{
  margin-bottom: 36px !important;   /* 👈 REAL spacing */
  padding: 64px 56px !important;    /* 👈 fills the box */
}

.about-page .feature:last-child{
  margin-bottom: 0 !important;
}

/* Bigger text inside the boxes */
.about-page .feature strong{
  font-size: 26px !important;
  margin-bottom: 18px !important;
}

.about-page .feature{
  font-size: 20px !important;
  line-height: 1.8 !important;
}
/* ================= ABOUT HERO – GRAPH FIX ================= */

.about-intro-text{
  position: relative !important;
  z-index: 2 !important;   /* 👈 ABOVE mountains */
}

/* HARD graph layer */
.about-intro-text::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background-image: url("graph.png") !important;
  background-repeat: no-repeat !important;

  /* 👇 THIS IS THE KEY */
  background-size: 260% auto !important;  /* wide, not tall */
  background-position: center 55% !important;

  opacity: 0.45 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Text stays above graph */
.about-intro-text > *{
  position: relative !important;
  z-index: 1 !important;
}
.footer-contact{
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.footer-contact:hover{
  color: var(--text);
}
footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 16px;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

/* divider stays same on desktop */
.footer-divider{
  width:1px;
  height:18px;
  background:rgba(255,255,255,.35);
}

/* contact links (phone + email) */
.footer-contact{
  color:var(--muted) !important;
  text-decoration:none;
  font-size:14px;
}

/* HARD stop iOS blue phone links */
.footer-contact,
.footer-contact:visited,
.footer-contact:hover,
.footer-contact:active{
  color:var(--muted) !important;
  -webkit-text-fill-color: var(--muted) !important;
}

/* ================= MOBILE – CLEAN 2 LINE LAYOUT ================= */
@media (max-width: 600px){
  footer{
    flex-wrap:wrap;
  }

  /* line 1 */
  footer > :nth-child(-n+3){
    flex:0 0 auto;
  }

  /* line break after LinkedIn */
  footer > :nth-child(3){
    margin-bottom:6px;
  }

  /* line 2 (phone + email) */
  footer > :nth-child(n+4){
    flex:0 0 auto;
  }
}
/* HOME ABOUT SECTION */

.home-about{
  margin-top:60px;
  margin-bottom:60px;
  display:grid;
  gap:36px;
}

.home-about-intro{
  padding:40px;
  text-align:center;
}

.home-about-intro h2{
  font-size:clamp(42px,6vw,64px);
  margin-bottom:28px;
}

.home-about-intro p{
  font-size:24px;
  line-height:1.9;
  max-width:900px;
  margin:auto;
  color:var(--muted);
}

.home-about-features{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.home-about-features .feature{
  padding:60px 60px;
  text-align:center;
}

.home-about-features .feature h3{
  font-size:34px;
  margin-bottom:18px;
}

.home-about-features .feature p{
  font-size:40px;
  max-width:720px;
  margin:auto;
  color:var(--muted);
}
.home-about-features .feature{
  background:none;
  border:none;
  box-shadow:none;
}
/* ================= CTA SECTION ================= */

.cta{
  text-align:center;
  padding:60px 20px;
}

.cta h2{
  font-size:clamp(36px,4vw,48px);
  margin-bottom:16px;
}

.cta p{
  font-size:26px;
  color:var(--muted);
  max-width:700px;
  margin:0 auto 30px;
  line-height:1.8;
}

.cta .pill{
  font-size:20px;
  padding:14px 26px;
}
/* ================= ABOUT PAGE REDESIGN ================= */

.about-redesign{
  padding-top: 40px;
  padding-bottom: 80px;
}

.about-profile{
  padding: 80px 64px 110px;
  margin-top: 40px;
  overflow: hidden;
}

.about-profile-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.about-profile-heading{
  margin-bottom: 70px;
}

.about-profile-heading h1{
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.08;
  margin: 0;
  color: var(--text);
  text-align: center;
}

.about-profile-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 90px;
  align-items: start;
}

.about-photo-wrap{
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.about-photo{
  width: 100%;
  max-width: none;
  min-height: 540px;
  height: 100%;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  object-fit: cover;
  object-position: center;
  background: rgba(255,255,255,.03);
}

.about-bio{
  max-width: 100%;
  padding-top: 22px;
}

.about-bio h2{
  margin: 0 0 38px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.15;
  color: var(--text);
}

.about-bio p{
  margin: 0 0 38px;
  font-size: 22px;
  line-height: 1.95;
  color: var(--muted);
}

.about-cta{
  margin-top: 50px;
}

.about-cta .pill{
  min-width: 220px;
  text-align: center;
  font-size: 16px;
  padding: 14px 28px;
}

/* ================= ABOUT PAGE MOBILE ================= */

@media (max-width: 1100px){
  .about-profile{
    padding: 64px 36px 90px;
  }

  .about-profile-grid{
    gap: 56px;
  }

  .about-photo{
    min-height: 440px;
  }

  .about-bio p{
    font-size: 20px;
  }
}

@media (max-width: 900px){
  .about-profile{
    padding: 56px 28px 80px;
  }

  .about-profile-heading{
    margin-bottom: 42px;
  }

  .about-profile-grid{
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .about-photo-wrap{
    justify-content: center;
  }

  .about-photo{
    max-width: 620px;
    min-height: 380px;
  }

  .about-bio{
    max-width: 100%;
    text-align: center;
    padding-top: 0;
  }

  .about-bio h2{
    margin-bottom: 26px;
  }

  .about-bio p{
    margin-bottom: 28px;
    font-size: 19px;
    line-height: 1.85;
  }

  .about-cta{
    display: flex;
    justify-content: center;
    margin-top: 34px;
  }
}

@media (max-width: 600px){
  .about-profile{
    padding: 42px 22px 64px;
  }

  .about-profile-heading h1{
    font-size: clamp(34px, 10vw, 52px);
  }

  .about-photo{
    min-height: 300px;
    border-radius: 22px;
  }

  .about-bio h2{
    font-size: clamp(26px, 8vw, 36px);
  }

  .about-bio p{
    font-size: 18px;
    line-height: 1.8;
  }

  .about-cta .pill{
    width: 100%;
    max-width: 280px;
  }
}
.service-content p:last-of-type{
  margin-bottom: 10px;
}

.service-learn-more{
  display: inline-block;
  margin: 6px 0 18px;
  color: var(--purple-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
}

.service-learn-more:hover{
  color: #fff;
  text-decoration: underline;
}
/* ================= SERVICE DETAIL PAGE ================= */

.service-page{
  padding: 70px 60px;
  margin-top: 40px;
}

.service-page-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}

/* LEFT SIDE */

.service-page-left{
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

.service-page-left h1{
  font-size: clamp(50px, 6vw, 80px);
  line-height: 1.05;
  margin: 0 0 60px;
}

.service-page-left h2{
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 24px;
}

.service-page-left p{
  font-size: 20px;
  line-height: 1.9;
  max-width: 560px;
  color: var(--muted);
  margin: 0;
}

.service-page-left .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: auto;
  max-width: max-content;
  margin-top: 80px;
  padding: 12px 22px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* RIGHT SIDE */

.service-page-right{
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding-top: 12px;
}

/* EACH RIGHT-SIDE FEATURE */

.service-feature{
  position: relative;
  min-height: 210px;
  padding: 30px 30px 30px 34px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: flex-end;
}

/* image becomes the background */
.service-feature img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border-radius: 0;
  display: block;
  z-index: 0;
  opacity: .80;
  filter: saturate(.95) brightness(.8);
}

/* dark overlay for readability */
.service-feature::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(8,10,18,.88) 0%,
      rgba(8,10,18,.76) 42%,
      rgba(8,10,18,.54) 100%
    );
  z-index: 1;
}

/* text block sits on top */
.service-feature > div{
  position: relative;
  z-index: 2;
  max-width: 78%;
}

/* text styling */
.service-feature strong{
  display: block;
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--text);
}

.service-feature p{
  margin: 0;
  color: rgba(243,244,246,.88);
  font-size: 18px;
  line-height: 1.6;
  max-width: 100%;
}

/* ================= MOBILE ================= */

@media (max-width: 900px){
  .service-page{
    padding: 50px 28px;
  }

  .service-page-grid{
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .service-page-left,
  .service-page-right{
    padding-top: 0;
  }

  .service-page-left h1{
    margin-bottom: 36px;
  }

  .service-page-left .pill{
    margin-top: 50px;
  }

  .service-page-right{
    gap: 24px;
  }

  .service-feature{
    min-height: 190px;
    padding: 26px 24px 26px 24px;
  }

  .service-feature > div{
    max-width: 85%;
  }
}

@media (max-width: 600px){
  .service-page-left h1{
    font-size: clamp(42px, 12vw, 56px);
  }

  .service-page-left h2{
    font-size: 24px;
  }

  .service-page-left p{
    font-size: 18px;
  }

  .service-feature{
    min-height: 170px;
    padding: 22px 20px;
  }

  .service-feature > div{
    max-width: 100%;
  }

  .service-feature strong{
    font-size: 21px;
  }

  .service-feature p{
    font-size: 17px;
    line-height: 1.55;
  }

  .service-page-left .pill{
    white-space: normal;
  }
}