/* =======================
   Root + Reset
======================= */
:root {
    --bg:#ffffff;
    --text:#0e0e10;
    --muted:#6b6f76;
    --muted-2:#9aa0a6;
    --card:#f4f5f7;
    --line:#eceff1;
    --primary:#0f0f10;
    --radius:18px;
    --maxw:1080px;
    --shadow:0 10px 24px rgba(15,15,16,.06);
    --accent:#6c5ce7;
  }
  * { box-sizing:border-box; }
  html, body { height:100%; }
  body {
    margin:0;
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  a { color:inherit; }
  
  /* Wrapper */
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
  
  /* =======================
     Navbar
  ======================= */
  /* NAV layout */
    .nav{position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(6px);background:rgba(255,255,255,.75);border-bottom:1px solid var(--line);}
    .nav-inner {position:relative; display:flex; align-items:center; gap:16px; height:64px;}
    .brand img {height:28px; width:auto;}
    .nav-right {margin-left:auto; display:flex; align-items:center; gap:24px;}

    /* menu links */
    .nav .links {position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:22px; font-weight:600; color:var(--muted);}
    .nav .links a {color:#6c757d; text-decoration:none; transition:color .2s ease,border-color .2s ease; padding-bottom:2px; border-bottom:2px solid transparent;}
    .nav .links a:hover {color:#111; border-bottom:2px solid var(--accent);}

    /* buttons */
    .actions{display:flex;gap:10px;}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#000;text-decoration:none;font-weight:700;transition:all .2s ease;}
    .btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);}
    .btn.primary{background:#0f0f10;color:#fff;border-color:#0f0f10;}
    .btn.primary:hover{background:#222;border-color:#222;color:#fff;}
    .btn.ghost:hover{background:#f4f5f7;border-color:#dcdcdc;color:#111;}

    /* burger (right side) */
    .burger{display:none;width:36px;height:36px;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);background:#fff;border-radius:10px;}
    .burger span{display:block;width:18px;height:2px;background:#111;}
    .burger:focus{outline:2px solid #111;outline-offset:2px;}

  
  /* =======================
     Hero
  ======================= */
  .hero {
    position:relative; min-height:100vh;
    padding:140px 0 110px;
    color:#fff;
    background-image:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)), url('Assets/Background6.svg');
    background-repeat:no-repeat; background-size:cover; background-position:center;
  }
  .hero>* { position:relative; z-index:1; }
  .eyebrow { color:var(--muted-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
  .title { font-size:clamp(34px,6vw,64px); line-height:1.03; font-weight:800; margin:28px 0 18px; }
  .subtitle { font-size:clamp(18px,2.3vw,22px); color:#a4a7ad; font-weight:800; margin:0 0 40px; }
  .cta { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:120px; }
  
  /* =======================
     Sections
  ======================= */
  .section { padding:100px 0; }
  .section-title { font-size:clamp(24px,3.4vw,36px); line-height:1.12; text-align:center; margin:0 0 20px; }
  .section-sub { color:var(--muted); text-align:center; margin:0 auto 50px; max-width:720px; }
  
  /* Features */
  .split {
    display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:50px; margin-bottom:80px;
  }
  .split.reverse { grid-template-columns:.9fr 1.1fr; }
  .split.reverse>:first-child { grid-column:2; grid-row:1; }
  .split.reverse>:last-child { grid-column:1; grid-row:1; }
  .feature-h { font-size:clamp(22px,2.5vw,32px); font-weight:800; margin:0 0 18px; }
  .feature-p { color:var(--muted); margin:0; }
  .feature-img {
    width:100%; max-width:500px; height:360px;
    border-radius:24px; border:1px solid var(--line);
    box-shadow:var(--shadow); object-fit:cover;
    display:block; margin:0 auto;
  }
  
  /* Pricing */
  .pricing { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:100px 0; }
  .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
  .card {
    background:#fff; border:1px solid var(--line); border-radius:24px;
    padding:36px 28px; box-shadow:var(--shadow);
    display:flex; flex-direction:column; justify-content:center;
  }
  .card h4 { margin:0 0 10px; color:var(--muted); }
  .price { font-size:38px; font-weight:800; margin-bottom:8px; }
  .list { margin:14px 0 20px; padding:0; list-style:none; color:var(--muted); }
  .list li { margin:8px 0; display:flex; gap:10px; align-items:flex-start; }
  .list li:before { content:"✓"; font-weight:800; color:#1e8e3e; }
  .card .btn { margin-top:auto; align-self:center; width:auto; min-width:250px; }
  .card.pro {
    position: relative;
    border: 2px solid #6c5ce7;       /* purple border */
    background: #faf9ff;             /* subtle purple tint */
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: scale(1.03);          /* slight zoom */
    z-index: 2;                      /* pop above others */
  }
  .card.pro:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  }

  .card.pro .badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #6c5ce7; /* brand purple */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* Testimonials */
  .testi { padding:56px 0; }
  .quotes { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .quote {
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:18px; color:#444; font-weight:500;
    display:flex; flex-direction:column; justify-content:space-between; min-height:200px;
  }
  /* Slider wrapper */
.quotes-slider{position:relative}

/* Mobile: turn quotes into a horizontal slider with scroll snap */
/* Hide slider arrows by default (desktop) */
.slider-btn{display:none;}

/* Mobile/tablet: turn quotes into a slider + show arrows */
@media (max-width:980px){
  .quotes{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:16px; padding:4px 8px 10px; scroll-behavior:smooth;
  }
  .quote{flex:0 0 80%; min-width:280px; scroll-snap-align:start;}

  /* show + style arrows only here */
  .slider-btn{
    display:grid; place-items:center;
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line); background:#fff; color:#111;
    font-size:20px; line-height:1; box-shadow:var(--shadow); cursor:pointer; z-index:2;
  }
  .slider-btn.prev{left:-6px;}
  .slider-btn.next{right:-6px;}
}


/* Desktop/tablet keep your grid (already defined in your sheet) */

  .signature { margin-top:auto; font-weight:800; color:#111; }
  .role { color:var(--muted); }

  /* Pricing – responsive columns */
  @media (max-width: 1100px){
    .cards{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 640px){
    .cards{grid-template-columns:1fr;}
    .card{padding:28px 20px;}              /* tighter padding on phones */
    .card .btn{width:100%; min-width:0;}   /* avoid pill overflow on small screens */
  }
  
  
  /* Final CTA */
  .final {
    position:relative; padding:120px 20px; text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#6c5ce7 0%,#a29bfe 100%);
    overflow:hidden;
  }
  .final::before {
    content:""; position:absolute; top:-50px; left:-50px;
    width:200px; height:200px; background:rgba(255,255,255,.08); border-radius:50%;
  }
  .final::after {
    content:""; position:absolute; bottom:-60px; right:-60px;
    width:250px; height:250px; background:rgba(255,255,255,.05); border-radius:50%;
  }
  .final .wrap { position:relative; z-index:1; }
  .final .title, .final .subtitle { color:#fff; }
  
  /* =======================
     Footer
  ======================= */
  .site-footer {
    background:#0f0f10; color:#b7bcc3;
    padding:56px 0 28px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  @supports (padding: max(0px)) {
    .site-footer{
      padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
  }
  .footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; align-items:start; }
  .footer-brand img { max-height:40px; width:auto; display:block; margin-bottom:14px; }
  .footer-blurb { margin:0; color:#8c929a; max-width:420px; }
  .footer-col { display:flex; flex-direction:column; gap:10px; }
  .footer-col h4 { margin:0 0 8px; color:#e8eaed; font-size:16px; font-weight:700; }
  .site-footer a { color:#b7bcc3; text-decoration:none; }
  .site-footer a:hover { color:#6c5ce7; }
  .footer-credit { text-align:center; margin-top:100px; color:#8c929a; font-size:14px; }
  .footer-credit a { color:#fff; font-weight:600; text-decoration:none; }
  .footer-credit a:hover { text-decoration:underline; }
  @supports (padding: max(0px)) {
    .site-footer{
      padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
  }

  /* === Inquiry form (Final CTA) === */
.inquiry-form{
    max-width: 640px; margin: 0 auto;
    text-align: left; background:#fff; color:#111;
    border:1px solid var(--line); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow);
  }
  .inquiry-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .inquiry-form .field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
  .inquiry-form label{font-weight:700; font-size:14px; color:#1b1c1d;}
  .inquiry-form input,
  .inquiry-form textarea{
    width:100%; border:1px solid #e0e3e7; border-radius:12px;
    padding:12px 14px; font:inherit; outline:none; background:#fff;
  }
  .inquiry-form input:focus,
  .inquiry-form textarea:focus{border-color:#c9cdd3; box-shadow:0 0 0 3px rgba(108,92,231,.12);}
  .inquiry-form .btn{width:100%; margin-top:6px;}
  .inquiry-form .hp{display:none;} /* honeypot */
  @media (max-width:640px){
    .inquiry-form{padding:18px;}
    .inquiry-form .row{grid-template-columns:1fr;}
  }

  #form-status {
    margin: 12px 0;
    font-weight: 600;
    display: block;
  }
  #form-status.success {
    color: #28a745; /* green */
  }
  #form-status.error {
    color: #dc3545; /* red */
  }
  
  
  
  /* =======================
     Responsive
  ======================= */
  @media (max-width:980px){
    .actions{display:none;}
    .nav .links{display:flex;}
  }

  /* Stack features on small screens: text on top, image below */
    @media (max-width: 768px){
        .split, .split.reverse{grid-template-columns:1fr; gap:18px;}
    
        /* put BOTH children in the single column */
        .split > :first-child,
        .split > :last-child,
        .split.reverse > :first-child,
        .split.reverse > :last-child {grid-column:1;}
    
        /* order = text first (row 1), image second (row 2) */
        .split > :first-child,
        .split.reverse > :first-child {grid-row:1;}
        .split > :last-child,
        .split.reverse > :last-child {grid-row:2;}
    
        /* friendlier image sizing on phones */
        .feature-img{width:100%; max-width:100%; height:auto; object-fit:cover; margin-top:6px;}
    }
  

  @media (max-width:640px){
    .burger{display:inline-flex;}
    .actions{display:none;}
    .nav .links{display:none;}                        /* hide by default on phones */
    .nav.open .links{
      display:flex; position:fixed; top:64px; left:0; right:0;  /* dropdown panel */
      transform:none;                                        /* reset centering for panel */
      background:#fff; border-bottom:1px solid var(--line);
      padding:14px 20px 18px; flex-direction:column; gap:14px; z-index:30;
    }
    .nav.open .links a{color:#111; font-weight:700; text-decoration:none;}
  }

  /* Mobile footer layout: brand + more stacked on left, sections on right */
@media (max-width:640px){
    .footer-grid{
      grid-template-columns: 1fr 1fr; /* two columns */
      gap: 24px;
    }
    .footer-brand{
      grid-column: 1; /* left column */
    }
    .footer-col:nth-of-type(2){ /* "More" nav */
      grid-column: 1; /* place under brand */
    }
    .footer-col:nth-of-type(1){ /* "Sections" nav */
      grid-column: 2; /* stays on right */
    }
  }