/* =========================================================
   SERVICESBYAI — PREMIUM LIGHT SYSTEM
   Warm Ivory / Charcoal / AI Lime
   Built specifically for the current index.html
   ========================================================= */

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

:root{
  --ivory:#f3f1ea;
  --ivory-light:#faf9f5;
  --charcoal:#111210;
  --black:#080908;
  --text:#151614;
  --text-soft:#666860;
  --text-muted:#8b8c84;
  --white:#fff;
  --lime:#b8f500;
  --lime-bright:#c7ff20;
  --border:rgba(21,22,20,.14);
  --border-dark:rgba(255,255,255,.14);
  --max-width:1380px;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Manrope",sans-serif;
  background:var(--ivory);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
}

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

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

::selection{
  background:var(--lime);
  color:var(--charcoal);
}

section{
  position:relative;
}

.section{
  width:min(var(--max-width),calc(100% - 96px));
  margin:0 auto;
}

button{
  font:inherit;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar{
  position:sticky;
  top:0;
  z-index:1000;

  height:82px;
  width:100%;

  padding:0 max(32px,5vw);

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

  background:rgba(243,241,234,.9);

  border-bottom:1px solid var(--border);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

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

.brand{
  font-size:27px;
  font-weight:800;
  letter-spacing:-1.8px;
  color:var(--charcoal);
  white-space:nowrap;
}

.brand span{
  color:var(--lime);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:42px;
}

.nav-links a{
  position:relative;
  color:var(--text-soft);
  font-size:14px;
  font-weight:600;

  transition:color .25s ease;
}

.nav-links a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-7px;

  width:0;
  height:2px;

  background:var(--lime);

  transition:width .25s ease;
}

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

.nav-links a:hover::after{
  width:100%;
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:13px 20px;

  border:1px solid rgba(21,22,20,.35);
  border-radius:999px;

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

  transition:all .3s ease;
}

.nav-cta span{
  font-size:18px;
  line-height:1;
}

.nav-cta:hover{
  background:var(--charcoal);
  color:var(--ivory);
  border-color:var(--charcoal);
  transform:translateY(-2px);
}


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

.hero{
  min-height:calc(100vh - 82px);

  padding:100px max(32px,7vw) 72px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(184,245,0,.13),
      transparent 28%
    ),
    var(--ivory);
}

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(21,22,20,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(21,22,20,.055) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 92%
    );

  pointer-events:none;
}

.hero-grid{
  position:absolute;
  inset:0;
}

.hero-content{
  position:relative;
  z-index:2;

  width:min(1250px,100%);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:11px;

  margin-bottom:34px;

  font-family:"DM Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;

  color:var(--text-muted);
}

.status-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--lime);

  box-shadow:
    0 0 18px rgba(184,245,0,.7);
}

.hero-title{
  max-width:1250px;

  margin-bottom:48px;

  font-size:clamp(72px,9.6vw,156px);

  line-height:.88;

  letter-spacing:-.075em;

  font-weight:800;

  color:var(--charcoal);
}

.hero-title span{
  color:var(--lime);
}

.hero-description{
  max-width:760px;

  margin-bottom:38px;

  color:var(--text-soft);

  font-size:clamp(18px,1.65vw,24px);

  line-height:1.6;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:26px;

  margin-bottom:70px;
}

.primary-button{
  display:inline-flex;
  align-items:center;
  gap:13px;

  padding:16px 23px;

  border-radius:999px;

  background:var(--charcoal);
  color:var(--ivory);

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

  transition:all .3s ease;
}

.primary-button:hover{
  background:var(--lime);
  color:var(--charcoal);

  transform:translateY(-3px);
}

.primary-button span{
  font-size:17px;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:9px;

  color:var(--text-soft);

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

  transition:color .25s ease;
}

.text-link:hover{
  color:var(--charcoal);
}

.text-link span{
  font-size:17px;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:28px;

  padding-top:22px;

  border-top:1px solid var(--border);

  font-family:"DM Mono",monospace;

  font-size:10px;
  letter-spacing:.13em;

  color:var(--text-muted);
}


/* =========================================================
   IDEA
   ========================================================= */

.idea{
  padding:145px 0 155px;
  background:var(--ivory-light);
}

.section-label{
  font-family:"DM Mono",monospace;

  font-size:10px;

  letter-spacing:.2em;

  color:var(--text-muted);
}

.idea-content{
  margin-top:52px;
}

.massive-title{
  max-width:1200px;

  margin-bottom:82px;

  font-size:clamp(60px,8.2vw,128px);

  line-height:.9;

  letter-spacing:-.075em;

  font-weight:800;
}

.massive-title span{
  color:var(--lime);
}

.two-column-text{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  max-width:1120px;

  margin-left:auto;
}

.two-column-text p{
  max-width:540px;

  color:var(--text-soft);

  font-size:18px;

  line-height:1.75;
}

.two-column-text strong{
  color:var(--charcoal);
}


/* =========================================================
   SOLUTIONS
   ========================================================= */

.solutions{
  width:min(var(--max-width),calc(100% - 96px));

  margin:0 auto;

  padding:125px 70px 100px;

  background:var(--charcoal);

  color:var(--ivory);
}

.section-heading{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:70px;

  margin-bottom:75px;
}

.section-title{
  margin-top:28px;

  font-size:clamp(58px,7vw,108px);

  line-height:.88;

  letter-spacing:-.075em;

  font-weight:800;
}

.section-title span{
  color:#686961;
}

.section-intro{
  align-self:end;

  max-width:550px;

  color:#a0a19a;

  font-size:17px;

  line-height:1.7;
}

.services-list{
  border-top:1px solid var(--border-dark);
}

.service-card{
  display:grid;

  grid-template-columns:70px minmax(0,1fr) auto;

  gap:30px;

  align-items:start;

  padding:42px 0;

  border-bottom:1px solid var(--border-dark);

  transition:
    padding-left .4s ease,
    background .4s ease;
}

.service-card:hover{
  padding-left:18px;
}

.service-number{
  padding-top:5px;

  font-family:"DM Mono",monospace;

  font-size:11px;

  color:#66675f;
}

.service-main h3{
  margin-bottom:12px;

  font-size:clamp(28px,3vw,45px);

  line-height:1;

  letter-spacing:-.05em;

  transition:color .3s ease;
}

.service-card:hover .service-main h3{
  color:var(--lime);
}

.service-main p{
  max-width:720px;

  color:#92938b;

  font-size:15px;

  line-height:1.7;
}

.tags{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:18px;
}

.tags span{
  padding:7px 10px;

  border:1px solid #393a35;

  color:#85867e;

  font-family:"DM Mono",monospace;

  font-size:9px;

  letter-spacing:.03em;
}

.service-arrow{
  padding-top:2px;

  color:var(--lime);

  font-size:22px;

  transition:transform .3s ease;
}

.service-card:hover .service-arrow{
  transform:translate(5px,-5px);
}


/* =========================================================
   TECHNOLOGY STRIP
   ========================================================= */

.technology-strip{
  padding:52px 0 58px;

  overflow:hidden;

  background:var(--ivory);

  border-bottom:1px solid var(--border);
}

.strip-label{
  width:min(var(--max-width),calc(100% - 96px));

  margin:0 auto 22px;

  font-family:"DM Mono",monospace;

  font-size:10px;

  letter-spacing:.18em;

  color:var(--text-muted);
}

.technology-track{
  display:flex;

  align-items:center;

  width:max-content;

  padding-left:2vw;

  animation:marquee 24s linear infinite;
}

.technology-track span{
  font-size:clamp(42px,5.5vw,86px);

  font-weight:800;

  letter-spacing:-.065em;

  white-space:nowrap;
}

.technology-track i{
  margin:0 25px;

  color:var(--lime);

  font-style:normal;

  font-size:30px;
}


/* =========================================================
   WORK / CASE STUDIES
   ========================================================= */

.work{
  padding:145px 0 160px;
}

.work .section-heading{
  margin-bottom:72px;
}

.work .section-title span{
  color:#8f9089;
}

.project{
  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:600px;

  margin-bottom:28px;

  overflow:hidden;
}

.project-dark{
  background:var(--charcoal);

  color:var(--ivory);
}

.project-reverse{
  background:var(--charcoal);

  color:var(--ivory);

  grid-template-columns:1fr 1fr;
}

.project-info{
  padding:76px;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.project-category{
  margin-bottom:28px;

  font-family:"DM Mono",monospace;

  font-size:10px;

  letter-spacing:.18em;

  color:#85867e;
}

.project-info h3{
  margin-bottom:28px;

  font-size:clamp(48px,5.5vw,82px);

  line-height:.9;

  letter-spacing:-.065em;
}

.project-info p{
  max-width:560px;

  margin-bottom:25px;

  color:#9a9b93;

  font-size:16px;

  line-height:1.75;
}

.project-link{
  width:max-content;

  margin-top:25px;

  padding-bottom:7px;

  border-bottom:1px solid #55564f;

  font-size:13px;

  transition:
    color .3s ease,
    border-color .3s ease;
}

.project-link:hover{
  color:var(--lime);

  border-color:var(--lime);
}


/* =========================================================
   PROJECT VISUALS
   ========================================================= */

.project-visual{
  position:relative;

  min-height:600px;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  background-color:#171815;
}

.visual-grid{
  position:absolute;

  inset:-30px;

  background-image:
    linear-gradient(
      rgba(255,255,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.035) 1px,
      transparent 1px
    );

  background-size:52px 52px;

  transition:transform .15s ease-out;
}

.project-visual::after{
  content:"";

  position:absolute;

  width:360px;
  height:360px;

  border-radius:50%;

  background:var(--lime);

  opacity:.08;

  filter:blur(85px);
}

.visual-label,
.visual-caption{
  position:absolute;

  z-index:3;

  font-family:"DM Mono",monospace;

  font-size:9px;

  letter-spacing:.15em;

  color:#74756d;
}

.visual-label{
  top:28px;
  left:30px;
}

.visual-caption{
  bottom:28px;
  left:30px;
}

.d2r-logo{
  position:relative;

  z-index:2;

  font-size:clamp(85px,10vw,150px);

  font-weight:800;

  letter-spacing:-.09em;

  color:var(--ivory);
}

.madeeha-logo-wrap{
  position:relative;

  z-index:3;

  width:min(58%,340px);

  padding:34px;

  background:#f8f7f2;
}

.madeeha-logo{
  width:100%;
  height:auto;
}


/* =========================================================
   AUTOMATION VISUAL
   ========================================================= */

.automation-visual{
  order:1;
}

.project-reverse .project-info{
  order:2;
}

.workflow{
  position:relative;

  z-index:2;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:0;
}

.workflow-box{
  width:145px;

  padding:17px 18px;

  border:1px solid #44453f;

  background:rgba(17,18,16,.8);

  text-align:center;

  font-family:"DM Mono",monospace;

  font-size:10px;

  color:#96978f;
}

.ai-box,
.n8n-box{
  border-color:var(--lime);

  color:var(--lime);

  box-shadow:
    0 0 35px rgba(184,245,0,.08);
}

.workflow-line{
  width:1px;

  height:32px;

  background:#55564f;
}


/* =========================================================
   APPROACH
   ========================================================= */

.approach{
  padding:150px 0 160px;
}

.approach-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(420px,1fr);

  gap:100px;

  margin-top:55px;
}

.approach-title{
  font-size:clamp(62px,7.7vw,120px);

  line-height:.86;

  letter-spacing:-.075em;

  font-weight:800;
}

.approach-title span{
  color:var(--lime);
}

.approach-list{
  border-top:1px solid var(--border);
}

.approach-item{
  display:grid;

  grid-template-columns:45px 1fr;

  gap:20px;

  padding:30px 0;

  border-bottom:1px solid var(--border);

  transition:padding-left .35s ease;
}

.approach-item:hover{
  padding-left:15px;
}

.approach-item > span{
  padding-top:4px;

  font-family:"DM Mono",monospace;

  font-size:10px;

  color:var(--text-muted);
}

.approach-item h3{
  margin-bottom:7px;

  font-size:20px;

  letter-spacing:-.03em;
}

.approach-item p{
  max-width:520px;

  color:var(--text-soft);

  font-size:14px;
}


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

.about{
  padding:135px max(32px,7vw);

  background:var(--charcoal);

  color:var(--ivory);
}

.about-content{
  max-width:1280px;

  margin:50px auto 0;
}

.about .massive-title{
  margin-bottom:72px;
}

.about .two-column-text{
  max-width:1080px;
}

.about .two-column-text p{
  color:#999a92;
}

.about .two-column-text strong{
  color:var(--ivory);
}

.about-stats{
  max-width:1080px;

  margin:85px auto 0;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  border-top:1px solid var(--border-dark);

  border-bottom:1px solid var(--border-dark);
}

.about-stats > div{
  padding:30px 24px;

  border-right:1px solid var(--border-dark);
}

.about-stats > div:last-child{
  border-right:0;
}

.about-stats span{
  display:block;

  margin-bottom:12px;

  font-family:"DM Mono",monospace;

  font-size:9px;

  letter-spacing:.15em;

  color:#77786f;
}

.about-stats strong{
  font-size:13px;
}


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

.contact{
  min-height:78vh;

  padding:130px 32px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(184,245,0,.1),
      transparent 34%
    ),
    var(--charcoal);

  color:var(--ivory);
}

.contact-glow{
  position:absolute;

  width:480px;
  height:480px;

  border-radius:50%;

  background:var(--lime);

  opacity:.04;

  filter:blur(100px);
}

.contact-label{
  position:relative;

  z-index:2;

  margin-bottom:34px;

  font-family:"DM Mono",monospace;

  font-size:10px;

  letter-spacing:.2em;

  color:#85867e;
}

.contact-title{
  position:relative;

  z-index:2;

  max-width:1200px;

  margin-bottom:48px;

  font-size:clamp(64px,9.5vw,150px);

  line-height:.87;

  letter-spacing:-.08em;

  font-weight:800;
}

.contact-title span{
  color:var(--lime);
}

.email-link{
  position:relative;

  z-index:2;

  display:inline-flex;

  align-items:center;

  gap:14px;

  padding-bottom:9px;

  border-bottom:1px solid #55564f;

  font-size:17px;

  transition:
    color .3s ease,
    border-color .3s ease;
}

.email-link:hover{
  color:var(--lime);

  border-color:var(--lime);
}

.email-link span{
  font-size:20px;
}


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

.footer{
  padding:60px max(32px,7vw) 28px;

  background:var(--charcoal);

  color:var(--ivory);

  border-top:1px solid var(--border-dark);
}

.footer-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  padding-bottom:55px;
}

.footer-brand{
  color:var(--ivory);
}

.footer-links{
  display:flex;

  gap:28px;
}

.footer-links a{
  color:#85867e;

  font-size:12px;

  transition:color .25s ease;
}

.footer-links a:hover{
  color:var(--lime);
}

.footer-bottom{
  display:flex;

  justify-content:space-between;

  gap:25px;

  padding-top:22px;

  border-top:1px solid var(--border-dark);

  color:#62635d;

  font-family:"DM Mono",monospace;

  font-size:9px;

  letter-spacing:.07em;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes marquee{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1050px){

  .section{
    width:min(var(--max-width),calc(100% - 64px));
  }

  .solutions{
    width:min(var(--max-width),calc(100% - 64px));

    padding:95px 45px;
  }

  .section-heading,
  .two-column-text{
    grid-template-columns:1fr;

    gap:35px;
  }

  .section-heading{
    margin-bottom:55px;
  }

  .approach-layout{
    grid-template-columns:1fr;

    gap:65px;
  }

  .project{
    grid-template-columns:1fr;
  }

  .project-info{
    padding:65px 55px;
  }

  .project-visual{
    min-height:500px;
  }

  .project-reverse .project-info,
  .automation-visual{
    order:initial;
  }
}


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

@media (max-width:700px){

  .section{
    width:calc(100% - 44px);
  }

  .navbar{
    height:72px;

    padding:0 22px;
  }

  .brand{
    font-size:22px;
  }

  .nav-links{
    display:none;
  }

  .nav-cta{
    padding:10px 15px;

    font-size:12px;
  }


  /* HERO */

  .hero{
    min-height:calc(100vh - 72px);

    padding:70px 22px 55px;
  }

  .hero-title{
    font-size:clamp(58px,16vw,92px);

    margin-bottom:36px;
  }

  .hero-description{
    font-size:17px;
  }

  .hero-actions{
    align-items:flex-start;

    flex-direction:column;

    gap:18px;

    margin-bottom:50px;
  }

  .hero-meta{
    gap:14px 22px;
  }


  /* IDEA / WORK / APPROACH */

  .idea,
  .work,
  .approach{
    padding:95px 0;
  }

  .massive-title,
  .section-title,
  .approach-title{
    font-size:clamp(52px,15vw,82px);
  }

  .idea-content{
    margin-top:40px;
  }

  .massive-title{
    margin-bottom:55px;
  }

  .two-column-text{
    gap:25px;
  }

  .two-column-text p{
    font-size:16px;
  }


  /* SOLUTIONS */

  .solutions{
    width:calc(100% - 28px);

    padding:80px 22px;
  }

  .service-card{
    grid-template-columns:40px 1fr;

    gap:14px;

    padding:32px 0;
  }

  .service-arrow{
    display:none;
  }

  .service-main h3{
    font-size:29px;
  }

  .service-main p{
    font-size:14px;
  }

  .tags span{
    font-size:8px;

    padding:6px 8px;
  }


  /* TECHNOLOGY */

  .technology-strip{
    padding:38px 0;
  }

  .strip-label{
    width:calc(100% - 44px);
  }

  .technology-track span{
    font-size:46px;
  }


  /* WORK */

  .work .section-heading{
    margin-bottom:45px;
  }

  .project{
    margin-bottom:18px;
  }

  .project-info{
    padding:55px 28px;
  }

  .project-info h3{
    font-size:52px;
  }

  .project-visual{
    min-height:360px;
  }

  .madeeha-logo-wrap{
    width:68%;

    padding:22px;
  }

  .d2r-logo{
    font-size:80px;
  }


  /* APPROACH */

  .approach-layout{
    margin-top:40px;

    gap:50px;
  }

  .approach-item{
    padding:26px 0;
  }

  .approach-item h3{
    font-size:18px;
  }

  .approach-item p{
    font-size:13px;
  }


  /* ABOUT */

  .about{
    padding:95px 22px;
  }

  .about-content{
    margin-top:40px;
  }

  .about .massive-title{
    margin-bottom:50px;
  }

  .about-stats{
    grid-template-columns:1fr;

    margin-top:55px;
  }

  .about-stats > div{
    border-right:0;

    border-bottom:1px solid var(--border-dark);
  }

  .about-stats > div:last-child{
    border-bottom:0;
  }


  /* CONTACT */

  .contact{
    min-height:72vh;

    padding:100px 22px;
  }

  .contact-title{
    font-size:clamp(58px,16vw,92px);
  }

  .email-link{
    font-size:14px;
  }


  /* FOOTER */

  .footer{
    padding:50px 22px 25px;
  }

  .footer-top,
  .footer-bottom{
    flex-direction:column;

    align-items:flex-start;

    gap:28px;
  }

  .footer-links{
    flex-wrap:wrap;

    gap:18px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }
}