/*
Theme Name: Web By Steps
Theme URI: https://webbysteps.com
Author: Web By Steps
Author URI: https://webbysteps.com
Description: One-page landing theme for Web By Steps — Web Development, App Development, Cross-Platform Development, WordPress Development and SEO services. Converted from the original static design, kept pixel-for-pixel identical.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webbysteps
*/


  :root{

    /* Premium Color Palette */

    --bg: #f8e7c9;       /* Cream background */

    --primary: #064e3b;  /* Emerald Dark Green */

    --primary-light: #0d9488; /* Teal accent */

    --primary-dark: #022c22;  /* Deepest green */

    

    --text: #064e3b;

    --text-dim: rgba(6, 78, 59, 0.7);

    --text-faint: rgba(6, 78, 59, 0.4);

    

    --line: rgba(6, 78, 59, 0.1);

    

    /* Liquid Glass Variables */

    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);

    --glass-border: rgba(255, 255, 255, 0.6);

    --glass-shadow: 0 16px 40px rgba(6, 78, 59, 0.08);

    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.2);

    

    --radius: 24px;

    --maxw: 1220px;

  }

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

  html{scroll-behavior:smooth;}

  body{

    background:var(--bg);

    color:var(--text);

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;

    overflow-x:hidden;

  }

  ::selection{background:var(--primary);color:var(--bg);}

  h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--text);}

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

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

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

  .mono{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0.05em;}

  .accent-text{

    background: linear-gradient(135deg, var(--primary), var(--primary-light));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  

  /* Soft Orbs for Liquid Glass Effect */

  .orb {

    position: fixed; border-radius: 50%; filter: blur(100px); z-index: -1; pointer-events: none; opacity: 0.6;

  }

  .orb-1 { top: -10%; left: -5%; width: 50vw; height: 50vw; background: rgba(255, 255, 255, 0.8); animation: floatOrb 12s ease-in-out infinite alternate; }

  .orb-2 { bottom: -10%; right: -10%; width: 45vw; height: 45vw; background: rgba(13, 148, 136, 0.2); animation: floatOrb 15s ease-in-out infinite alternate-reverse; }

  .orb-3 { top: 40%; left: 30%; width: 30vw; height: 30vw; background: rgba(255, 255, 255, 0.6); animation: floatOrb 10s ease-in-out infinite alternate; }

  @keyframes floatOrb {

    0% { transform: translate(0, 0) scale(1); }

    100% { transform: translate(60px, 80px) scale(1.15); }

  }

  .eyebrow{

    font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;

    color:var(--primary);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px; font-weight:600;

  }

  .eyebrow::before{content:"";width:30px;height:2px;background:var(--primary);}

  .btn{

    display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border-radius:12px;

    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:16px;cursor:pointer;

    transition:all .4s cubic-bezier(0.2, 0.8, 0.2, 1);

    white-space:nowrap; position:relative; overflow:hidden;

  }

  .btn:active{transform:scale(.95);}

  .btn-primary{

    background: var(--primary); color: var(--bg); border: none;

    box-shadow: 0 10px 24px rgba(6, 78, 59, 0.25);

  }

  .btn-primary:hover{

    background: var(--primary-dark);

    box-shadow: 0 15px 35px rgba(6, 78, 59, 0.35); transform:translateY(-3px);

  }

  .btn-ghost{

    background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);

    border: 1px solid var(--glass-border); color: var(--primary); 

    box-shadow: var(--glass-shadow);

  }

  .btn-ghost:hover{

    background: rgba(255,255,255,0.6); border-color: #fff;

    transform:translateY(-3px); box-shadow: 0 12px 30px rgba(6, 78, 59, 0.1);

  }

  /* ---------- Header ---------- */

  header{

    position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 0;

    background:transparent; transition:all .5s cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  header.scrolled{

    padding:16px 0;

    background: rgba(248, 231, 201, 0.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);

    border-bottom: 1px solid rgba(255,255,255,0.4); box-shadow:0 10px 40px rgba(6,78,59,0.05);

  }

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

  .logo{ display:flex; align-items:center; text-decoration:none; }

  .logo svg { display:block; height:36px; width:auto; }

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

  .nav-links a:not(.btn){font-size:15px; font-weight:600; color:var(--text-dim);transition:all .3s;position:relative;}

  .nav-links a:not(.btn):hover{color:var(--primary);}

  #burger{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:70;}

  #burger span{width:26px;height:2px;background:var(--primary);display:block;transition:.3s;}

  @media (max-width:900px){

    .nav-links{position:fixed;top:0;right:0;height:100vh;width:80%;max-width:360px;

      background:rgba(248, 231, 201, 0.9); backdrop-filter:blur(30px);

      border-left:1px solid rgba(255,255,255,0.5);flex-direction:column;justify-content:center;

      align-items:flex-start;padding:50px;gap:30px;transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);

      box-shadow:-20px 0 50px rgba(6,78,59,0.1);}

    .nav-links.open{transform:translateX(0);}

    .nav-links a{font-size:22px;}

    #burger{display:flex;}

  }

  /* ---------- Hero ---------- */

  #hero{position:relative;padding:220px 0 140px;overflow:visible; perspective: 1000px;}

  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}

  .hero-inner h1{font-size:clamp(46px,5vw,72px);margin-bottom:24px; line-height: 1.05;}

  .hero-inner p{font-size:19px;color:var(--text-dim);max-width:520px;margin-bottom:40px;line-height:1.7;}

  .hero-cta{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:40px;}

  .hero-chips{display:flex;flex-wrap:wrap;gap:12px;}

  .hero-chips span{

    display:inline-flex;align-items:center;gap:6px;

    font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:var(--primary);

    background:var(--glass-bg); backdrop-filter: blur(10px); border:1px solid var(--glass-border);

    padding:8px 16px;border-radius:999px; font-weight:600; box-shadow: 0 4px 12px rgba(6,78,59,0.05);

  }

  .hero-chips span i{width:14px;height:14px;}

  /* hero 3D scene (Liquid Glass adapted) */

  .hero-visual{position:relative;height:500px;perspective:1500px; transform-style: preserve-3d;}

  .mock{

    position:absolute; border-radius:24px;

    background: var(--glass-bg);

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

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

    box-shadow: var(--glass-shadow), var(--glass-inset);

    transform-style:preserve-3d; transition:transform .2s ease-out;

  }

  .mock-browser{width:400px;height:260px;top:30px;left:-20px;transform:translateZ(0px) rotateY(15deg) rotateX(10deg); animation:float1 8s ease-in-out infinite;}

  .mock-phone{width:150px;height:300px;top:110px;right:-10px;transform:translateZ(80px) rotateY(-15deg) rotateX(5deg); animation:float2 9s ease-in-out infinite;}

  .mock-rank{width:300px;height:200px;bottom:-20px;left:70px;transform:translateZ(120px) rotateY(5deg) rotateX(15deg); animation:float3 7.5s ease-in-out infinite;}

  

  @keyframes float1{0%,100%{transform:translateZ(0px) rotateY(15deg) rotateX(10deg) translateY(0);}50%{transform:translateZ(0px) rotateY(15deg) rotateX(10deg) translateY(-20px);}}

  @keyframes float2{0%,100%{transform:translateZ(80px) rotateY(-15deg) rotateX(5deg) translateY(0);}50%{transform:translateZ(80px) rotateY(-15deg) rotateX(5deg) translateY(-25px);}}

  @keyframes float3{0%,100%{transform:translateZ(120px) rotateY(5deg) rotateX(15deg) translateY(0);}50%{transform:translateZ(120px) rotateY(5deg) rotateX(15deg) translateY(-15px);}}

  .mock > * { transform: translateZ(30px); }

  .mock-browser .bar{display:flex;gap:6px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.4);align-items:center; transform: translateZ(20px);}

  .mock-browser .bar i{width:10px;height:10px;border-radius:50%;background:#e2e8f0;display:block;}

  .mock-browser .bar i:nth-child(1){background:#ef4444;}

  .mock-browser .bar i:nth-child(2){background:#eab308;}

  .mock-browser .bar i:nth-child(3){background:#22c55e;}

  .mock-browser .url{

    margin-left:12px;flex:1;background:rgba(255,255,255,0.5);border-radius:8px;height:24px;

    font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;color:var(--primary); font-weight:600;

    display:flex;align-items:center;padding:0 12px; border:1px solid rgba(255,255,255,0.6);

  }

  .mock-browser .body{padding:24px; transform: translateZ(40px);}

  .mock-browser .hero-block{height:70px;border-radius:12px;background:var(--primary);margin-bottom:14px; box-shadow: 0 10px 20px rgba(6,78,59,0.2);}

  .mock-browser .line{height:8px;border-radius:4px;background:rgba(6,78,59,0.1);margin-bottom:12px;}

  .mock-browser .line.w60{width:60%;} .mock-browser .line.w80{width:80%;} .mock-browser .line.w40{width:40%;}

  .mock-phone{padding:18px 16px;display:flex;flex-direction:column;gap:14px;}

  .mock-phone .notch{width:46px;height:6px;border-radius:4px;background:rgba(6,78,59,0.2);margin:0 auto 10px; transform: translateZ(10px);}

  .mock-phone .row{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.6);border-radius:12px;padding:12px; transform: translateZ(30px); transition: .3s;}

  .mock-phone .row:hover{background:rgba(255,255,255,0.8); transform: translateZ(40px);}

  .mock-phone .row .dot{width:20px;height:20px;border-radius:6px;background:var(--primary-light);flex:none; box-shadow:0 4px 10px rgba(13,148,136,0.3);}

  .mock-phone .row .bars{flex:1;}

  .mock-phone .row .bars i{display:block;height:6px;border-radius:3px;background:rgba(6,78,59,0.15);margin-bottom:6px;}

  .mock-phone .cta{margin-top:auto;height:40px;border-radius:12px;background:var(--primary); transform: translateZ(40px); box-shadow: 0 8px 16px rgba(6,78,59,0.2);}

  .mock-rank{padding:24px 28px;}

  .mock-rank .breadcrumb{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;color:var(--primary-light);font-weight:600;margin-bottom:8px; transform: translateZ(20px);}

  .mock-rank .title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:var(--text);margin-bottom:12px; transform: translateZ(40px);}

  .mock-rank .desc{height:6px;border-radius:3px;background:rgba(6,78,59,0.1);margin-bottom:10px; transform: translateZ(30px);}

  .mock-rank .desc.w90{width:90%;} .mock-rank .desc.w70{width:70%;}

  .mock-rank .badge{

    position:absolute;top:24px;right:28px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px; font-weight:600;

    background:var(--primary);color:var(--bg);

    border-radius:999px;padding:6px 14px; transform: translateZ(50px); box-shadow: 0 4px 12px rgba(6,78,59,0.2);

  }

  .tag{

    position:absolute;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.1em; font-weight:700;

    color:var(--primary);

    background: var(--glass-bg); backdrop-filter: blur(16px); border: 1px solid var(--glass-border);

    padding:10px 20px;border-radius:999px;box-shadow:var(--glass-shadow); display:inline-flex;align-items:center;gap:8px;

    transform: translateZ(150px); animation: floatTag 6s ease-in-out infinite alternate;

  }

  .tag-web{top:15%;left:-15%; animation-delay: 0s;}

  .tag-app{top:50%;right:-15%; animation-delay: 1s;}

  .tag-seo{bottom:5%;left:10%; animation-delay: 2s;}

  @keyframes floatTag { 0% { transform: translateZ(150px) translateY(0); } 100% { transform: translateZ(150px) translateY(-15px); } }

  @media (max-width:1024px){ .hero-grid{grid-template-columns:1fr;} .hero-visual{margin-top:60px; height: 400px;} .mock-browser{left:50%; margin-left:-200px;} }

  @media (max-width:520px){ .hero-visual{transform:scale(.7);transform-origin:top center;height:300px;} }

  /* ---------- generic section ---------- */

  section{position:relative;padding:140px 0; z-index:2;}

  .section-head{max-width:680px;margin-bottom:70px;}

  .section-head.center{margin-left:auto;margin-right:auto;text-align:center; display:flex; flex-direction:column; align-items:center;}

  .section-head h2{font-size:clamp(32px,5vw,50px);}

  .section-head p{color:var(--text-dim);font-size:18px;margin-top:20px;line-height:1.7;}

  .reveal{opacity:0;transform:translateY(40px) translateZ(0);transition:opacity 0.8s cubic-bezier(.2,.8,.2,1),transform 0.8s cubic-bezier(.2,.8,.2,1);}

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

  /* ---------- About Section (Redesigned Liquid Glass & Engineering Lab) ---------- */

  #about {

    background: linear-gradient(145deg, #04382a 0%, #022018 100%);

    border-radius: 40px;

    margin: 0 20px;

    padding: 120px 0;

    position: relative;

    overflow: hidden;

    color: #f8e7c9;

    box-shadow: 0 30px 80px rgba(6, 78, 59, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.1);

  }

  #about::before {

    content: '';

    position: absolute;

    top: -40%;

    right: -15%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(13, 148, 136, 0.25) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

  }

  #about::after {

    content: '';

    position: absolute;

    bottom: -30%;

    left: -10%;

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, rgba(248, 231, 201, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

  }

  .about-head {

    max-width: 820px;

    margin: 0 auto 60px;

    text-align: center;

  }

  #about .eyebrow-pill {

    color: #0d9488;

    background: rgba(13, 148, 136, 0.12);

    padding: 8px 20px;

    border-radius: 999px;

    border: 1px solid rgba(13, 148, 136, 0.3);

    margin-bottom: 24px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

  }

  #about h2 {

    color: #f8e7c9;

    font-size: clamp(34px, 4.5vw, 54px);

    line-height: 1.15;

    letter-spacing: -0.02em;

  }

  .about-accent {

    background: linear-gradient(135deg, #f8e7c9 0%, #2dd4bf 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  #about p.lead {

    font-size: 18px;

    color: rgba(248, 231, 201, 0.8);

    line-height: 1.75;

    margin-top: 20px;

  }

  /* About Layout Grid */

  .about-main-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: 40px;

    align-items: stretch;

    margin-bottom: 50px;

  }

  /* Interactive Code vs Builder Showcase */

  .about-interactive-card {

    background: rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(20px);

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

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 28px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

    position: relative;

  }

  .about-tab-toggle {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    background: rgba(0, 0, 0, 0.35);

    padding: 6px;

    border-radius: 14px;

    margin-bottom: 24px;

    border: 1px solid rgba(255, 255, 255, 0.08);

  }

  .about-tab-btn {

    background: transparent;

    border: none;

    color: rgba(248, 231, 201, 0.6);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13px;

    font-weight: 600;

    padding: 12px 14px;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

  }

  .about-tab-btn.active {

    background: rgba(13, 148, 136, 0.35);

    color: #fff;

    border: 1px solid rgba(45, 212, 191, 0.5);

    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);

  }

  .about-tab-btn:hover:not(.active) {

    color: #f8e7c9;

    background: rgba(255, 255, 255, 0.06);

  }

  /* Tab panels */

  .about-tab-content { display: none; flex-direction: column; gap: 20px; height: 100%; justify-content: space-between; }

  .about-tab-content.active { display: flex; animation: fadeInTab 0.4s ease forwards; }

  @keyframes fadeInTab {

    from { opacity: 0; transform: translateY(8px); }

    to { opacity: 1; transform: translateY(0); }

  }

  .perf-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.03);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    padding: 16px 20px;

  }

  .perf-score-badge {

    display: flex;

    align-items: center;

    gap: 14px;

  }

  .score-circle {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 800;

    font-size: 17px;

    flex-shrink: 0;

  }

  .score-circle.green { background: rgba(74, 222, 128, 0.15); color: #4ade80; border: 2px solid #4ade80; box-shadow: 0 0 15px rgba(74, 222, 128, 0.3); }

  .score-circle.red { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 2px solid #f87171; box-shadow: 0 0 15px rgba(248, 113, 113, 0.3); }

  .perf-details { display: flex; flex-direction: column; gap: 2px; }

  .perf-details strong { font-size: 15px; color: #f8e7c9; font-family: 'Plus Jakarta Sans', sans-serif; }

  .perf-details span { font-size: 12px; color: rgba(248, 231, 201, 0.65); font-family: 'Plus Jakarta Sans', sans-serif; }

  /* Metrics mini grid */

  .about-metrics-mini {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }

  .metric-mini-item {

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 14px;

    padding: 14px;

  }

  .metric-mini-item .val {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 4px;

  }

  .val.green-txt { color: #2dd4bf; }

  .val.red-txt { color: #f87171; }

  .metric-mini-item .lbl {

    font-size: 12px;

    color: rgba(248, 231, 201, 0.6);

  }

  /* Code Terminal Box */

  .terminal-box {

    background: #011611;

    border: 1px solid rgba(13, 148, 136, 0.3);

    border-radius: 16px;

    padding: 16px 20px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12.5px;

    line-height: 1.65;

    overflow-x: auto;

    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);

  }

  .terminal-bar {

    display: flex;

    gap: 6px;

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  }

  .terminal-bar span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

  .t-red { background: #ef4444; }

  .t-yellow { background: #eab308; }

  .t-green { background: #22c55e; }

  

  .c-kw { color: #2dd4bf; font-weight: 600; }

  .c-fn { color: #facc15; }

  .c-str { color: #a7f3d0; }

  .c-comment { color: rgba(248, 231, 201, 0.45); font-style: italic; }

  .c-err { color: #f87171; }

  /* Bento 4 Pillars Grid */

  .about-pillars-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

  }

  .pillar-card {

    background: rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(16px);

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

    border: 1px solid rgba(248, 231, 201, 0.12);

    border-radius: 24px;

    padding: 28px 24px;

    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

  }

  .pillar-card:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(45, 212, 191, 0.4);

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

  }

  .pillar-num {

    position: absolute;

    top: 20px;

    right: 20px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 700;

    color: rgba(45, 212, 191, 0.6);

    background: rgba(13, 148, 136, 0.12);

    padding: 4px 10px;

    border-radius: 999px;

    border: 1px solid rgba(13, 148, 136, 0.25);

  }

  .pillar-icon {

    width: 52px;

    height: 52px;

    border-radius: 16px;

    background: linear-gradient(135deg, rgba(13, 148, 136, 0.3) 0%, rgba(6, 78, 59, 0.5) 100%);

    border: 1px solid rgba(45, 212, 191, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #2dd4bf;

    margin-bottom: 20px;

    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.2);

  }

  .pillar-card h4 {

    font-size: 18.5px;

    color: #f8e7c9;

    margin-bottom: 10px;

  }

  .pillar-card p {

    font-size: 14px;

    color: rgba(248, 231, 201, 0.7);

    line-height: 1.65;

  }

  /* Bottom Trust Strip inside About */

  .about-bottom-bar {

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 20px;

    padding: 20px 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;

  }

  .about-status-pill {

    display: flex;

    align-items: center;

    gap: 12px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    color: #f8e7c9;

  }

  .status-dot-pulse {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);

    animation: pulseDot 2s infinite;

  }

  @keyframes pulseDot {

    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }

    70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }

    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }

  }

  @media (max-width: 1024px) {

    .about-main-grid { grid-template-columns: 1fr; gap: 36px; }

  }

  @media (max-width: 768px) {

    #about { margin: 0; border-radius: 0; padding: 80px 0; }

    .about-pillars-grid { grid-template-columns: 1fr; }

    .about-bottom-bar { flex-direction: column; text-align: center; }

  }

  /* ---------- Services Section Redesign ---------- */

  #services { padding: 120px 0; position: relative; }

  .svc-filter-bar {

    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 32px;

    margin-bottom: 50px;

  }

  .svc-filter-btn {

    background: rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(12px);

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

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

    padding: 10px 22px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: var(--glass-shadow);

  }

  .svc-filter-btn.active {

    background: var(--primary);

    color: var(--bg);

    border-color: var(--primary);

    box-shadow: 0 6px 20px rgba(6, 78, 59, 0.25);

  }

  .svc-filter-btn:hover:not(.active) {

    background: rgba(255, 255, 255, 0.7);

    color: var(--primary);

  }

  .svc-grid {

    display: grid;

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

    gap: 32px;

    perspective: 1200px;

  }

  .svc-card {

    background: var(--glass-bg);

    backdrop-filter: blur(24px);

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

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

    border-radius: 28px;

    padding: 28px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);

    position: relative;

    overflow: hidden;

  }

  .svc-card:hover {

    background: rgba(255, 255, 255, 0.65);

    border-color: #fff;

    box-shadow: 0 25px 60px rgba(6, 78, 59, 0.12), inset 0 1px 0 #fff;

    transform: translateY(-10px);

  }

  .svc-img-wrap {

    position: relative;

    width: 100%;

    height: 180px;

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 24px;

    border: 1px solid rgba(255, 255, 255, 0.8);

  }

  .svc-img-wrap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

  }

  .svc-card:hover .svc-img-wrap img {

    transform: scale(1.06);

  }

  .svc-cat-badge {

    position: absolute;

    top: 14px;

    left: 14px;

    background: rgba(6, 78, 59, 0.85);

    backdrop-filter: blur(10px);

    color: var(--bg);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 12px;

    border-radius: 999px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

  }

  .svc-header {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;

  }

  .svc-ic-box {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.8);

    border: 1px solid #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    box-shadow: 0 6px 16px rgba(6, 78, 59, 0.08);

    flex-shrink: 0;

  }

  .svc-card h3 {

    font-size: 21px;

    color: var(--primary);

    line-height: 1.25;

  }

  .svc-card p.svc-desc {

    color: var(--text-dim);

    font-size: 14.5px;

    line-height: 1.65;

    margin-bottom: 20px;

  }

  .svc-features-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 24px;

    padding-top: 14px;

    border-top: 1px solid rgba(6, 78, 59, 0.08);

  }

  .svc-feature-item {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 600;

    color: var(--primary);

  }

  .svc-feature-item i {

    color: var(--primary-light);

    flex-shrink: 0;

  }

  .svc-footer {

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-top: auto;

  }

  .svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }

  .svc-tags span {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11px;

    font-weight: 600;

    color: var(--primary);

    background: rgba(255, 255, 255, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.9);

    padding: 4px 12px;

    border-radius: 999px;

  }

  .svc-inquire-btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 12px 18px;

    border-radius: 12px;

    background: rgba(6, 78, 59, 0.08);

    border: 1px solid rgba(6, 78, 59, 0.15);

    color: var(--primary);

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 600;

    font-size: 13.5px;

    cursor: pointer;

    transition: all 0.3s ease;

  }

  .svc-card:hover .svc-inquire-btn {

    background: var(--primary);

    color: var(--bg);

    border-color: var(--primary);

    box-shadow: 0 6px 18px rgba(6, 78, 59, 0.2);

  }

  @media (max-width: 1024px) {

    .svc-grid { grid-template-columns: repeat(2, 1fr); }

  }

  @media (max-width: 680px) {

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

  }

  /* ---------- Projects (Featured Work) Redesign ---------- */

  #projects { padding: 120px 0; position: relative; }

  

  .projects-header-bar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 40px;

    flex-wrap: wrap;

    gap: 24px;

  }

  .projects-header-left h2 { font-size: clamp(32px, 4.5vw, 48px); margin-top: 10px; }

  

  /* Filter Tabs */

  .proj-filter-bar {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;

    background: rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(12px);

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

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

    padding: 6px;

    border-radius: 999px;

    box-shadow: var(--glass-shadow);

  }

  .proj-filter-btn {

    background: transparent;

    border: none;

    padding: 8px 18px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--text-dim);

    cursor: pointer;

    transition: all 0.3s ease;

  }

  .proj-filter-btn.active {

    background: var(--primary);

    color: var(--bg);

    box-shadow: 0 4px 14px rgba(6, 78, 59, 0.25);

  }

  .proj-filter-btn:hover:not(.active) {

    color: var(--primary);

    background: rgba(255, 255, 255, 0.6);

  }

  /* Slider Wrapper */

  .proj-slider-wrap { 

    position: relative; width: 100%; border-radius: 36px; 

    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset);

    overflow: hidden; 

  }

  .proj-slider { display: flex; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); align-items: stretch; }

  

  .proj-slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1.25fr; align-items: stretch; }

  

  /* Slide Left Info Box */

  .proj-slide-left {

    background: rgba(255, 255, 255, 0.35);

    border-right: 1px solid rgba(255, 255, 255, 0.5);

    padding: 56px 48px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: 24px;

  }

  .proj-cat-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1em;

    color: var(--primary-light);

    text-transform: uppercase;

  }

  .proj-slide-left h3 {

    font-size: clamp(26px, 3vw, 36px);

    color: var(--primary);

    line-height: 1.2;

    margin-top: 8px;

    margin-bottom: 12px;

  }

  .proj-desc-text {

    font-size: 15.5px;

    color: var(--text-dim);

    line-height: 1.7;

    margin-bottom: 16px;

  }

  

  /* Highlights Grid inside Slide */

  .proj-highlights {

    display: grid;

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

    gap: 10px;

    margin-bottom: 20px;

  }

  .proj-highlight-item {

    background: rgba(255, 255, 255, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 12px;

    padding: 10px 12px;

    font-size: 12.5px;

    font-weight: 600;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 6px;

  }

  

  /* Tech Stack Pills */

  .proj-tech-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

  .proj-tech-stack span {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 11.5px;

    font-weight: 600;

    color: var(--primary-dark);

    background: rgba(6, 78, 59, 0.08);

    border: 1px solid rgba(6, 78, 59, 0.15);

    padding: 5px 12px;

    border-radius: 999px;

  }

  

  .proj-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

  

  /* Slide Right Image & Watermark */

  .proj-slide-right {

    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 60px 40px; min-height: 520px;

  }

  .proj-name-bg {

    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12vw;

    color: rgba(6,78,59,0.05); line-height: 0.8; text-align: center; white-space: nowrap;

    z-index: 1; user-select: none; pointer-events: none;

  }

  .premium-mockup {

    position: relative; z-index: 2; width: 100%; max-width: 660px;

    filter: drop-shadow(0 30px 50px rgba(6,78,59,0.18)); transform: translateY(20px) scale(0.96); opacity:0; transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

    border-radius: 20px; overflow: hidden; border: 5px solid #fff;

  }

  .premium-mockup img { width: 100%; height: auto; display: block; border-radius: 14px; }

  .proj-slide.active .premium-mockup { transform: translateY(0) scale(1); opacity:1; transition-delay: 0.15s;}

  /* Floating Live Badge on Image */

  .proj-live-badge {

    position: absolute;

    top: 24px;

    right: 24px;

    z-index: 5;

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(12px);

    border: 1px solid #fff;

    padding: 6px 14px;

    border-radius: 999px;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 12px;

    font-weight: 600;

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 8px;

    box-shadow: 0 8px 20px rgba(6, 78, 59, 0.1);

  }

  /* Slider Controls Bar at Bottom */

  .slider-controls-bar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 32px;

    background: rgba(255, 255, 255, 0.4);

    border-top: 1px solid rgba(255, 255, 255, 0.5);

    flex-wrap: wrap;

    gap: 16px;

  }

  .slider-nav-arrows { display: flex; align-items: center; gap: 12px; }

  .slider-arrow-btn {

    width: 44px; height: 44px; border-radius: 50%;

    background: rgba(255, 255, 255, 0.6);

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

    color: var(--primary);

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

    cursor: pointer; transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.08);

  }

  .slider-arrow-btn:hover {

    background: var(--primary); color: var(--bg);

    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 78, 59, 0.2);

  }

  

  .slider-counter {

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-size: 14px;

    font-weight: 700;

    color: var(--primary);

  }

  

  .slider-dots-group { display: flex; gap: 10px; align-items: center; }

  .slider-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(6,78,59,0.25); cursor: pointer; transition: 0.3s; }

  .slider-dot.active { background: var(--primary); transform: scale(1.35); box-shadow: 0 0 10px rgba(6, 78, 59, 0.4); }

  @media (max-width: 960px) {

    .proj-slide { grid-template-columns: 1fr; }

    .proj-slide-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding: 36px 24px; }

    .proj-slide-right { padding: 40px 20px; min-height: 320px; }

    .proj-highlights { grid-template-columns: 1fr; }

  }

  /* ---------- Process ---------- */

  .steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:start; position:relative;}

  .steps-row::before {

    content:''; position:absolute; top:35px; left:5%; right:5%; height:2px;

    background: linear-gradient(90deg, transparent, rgba(6,78,59,0.2), transparent); z-index: 0;

  }

  .step-card{ position:relative; z-index:1; padding-top:10px; text-align:center; }

  .step-num{

    width:60px;height:60px;border-radius:50%;background:var(--bg);color:var(--primary);

    display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;

    margin:0 auto 24px;border:2px solid var(--primary); box-shadow: 0 10px 20px rgba(6,78,59,0.1);

    position:relative; z-index:2; transition: .4s cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  .step-card:hover .step-num { transform: scale(1.15); box-shadow: 0 15px 30px rgba(6,78,59,0.2); background:var(--primary); color:var(--bg); }

  .step-card h4{font-size:20px;margin-bottom:12px;}

  .step-card p{color:var(--text-dim);font-size:15px;line-height:1.7;}

  @media (max-width:980px){

    .steps-row{grid-template-columns:1fr;gap:40px; padding-left: 50px;}

    .steps-row::before { top:0; bottom:0; left:25px; width:2px; height:100%; right:auto; background: linear-gradient(180deg, transparent, rgba(6,78,59,0.2), transparent); }

    .step-card{text-align:left; padding-top:0;}

    .step-num{margin:0 0 20px 0; position:absolute; left:-75px; top:-10px;}

  }

  /* ---------- Testimonials (Dark Green Background to break layout elegantly) ---------- */

  #testimonials { position: relative; overflow: hidden; background: var(--primary); color: var(--bg); padding: 160px 0; border-radius:40px; margin: 0 20px;}

  .test-bg-text {

    position: absolute; top: 15%; left: 50%; transform: translateX(-50%); white-space: nowrap;

    font-size: 18vw; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;

    color: rgba(248, 231, 201, 0.04); line-height: 1; pointer-events: none; z-index: 0;

    user-select: none; letter-spacing: -0.05em;

  }

  #testimonials h2 { color: var(--bg); }

  #testimonials .eyebrow { color: var(--primary-light); }

  #testimonials .eyebrow::before { background: var(--primary-light); }

  

  .test-masonry { column-count: 3; column-gap: 30px; position: relative; z-index: 2; margin-top: 60px; }

  .test-card {

    background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);

    color: rgba(248, 231, 201, 0.9);

    border-radius: 24px; padding: 40px 32px; margin-bottom: 30px;

    display: inline-block; width: 100%; box-sizing: border-box;

    box-shadow: 0 20px 40px rgba(0,0,0,0.2);

    break-inside: avoid; border: 1px solid rgba(248, 231, 201, 0.15);

    transition: transform 0.4s;

  }

  .test-card:hover { transform: translateY(-8px); border-color: rgba(248, 231, 201, 0.3); }

  .test-card .t-quote { font-family:'Plus Jakarta Sans'; font-size:60px; line-height:0; color:rgba(248,231,201,0.1); text-align:right; margin-bottom:10px; }

  .test-card p.body { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }

  .test-person { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(248,231,201,0.1); padding-bottom: 24px; margin-bottom: 24px; }

  .test-avatar { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; overflow:hidden; border:2px solid rgba(248,231,201,0.2);}

  .test-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .test-info b { font-size: 18px; color: var(--bg); display: block; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em;}

  .test-info span { font-size: 14px; color: var(--primary-light); font-weight:600; }

  .test-footer { display: flex; justify-content: space-between; align-items: center; }

  .test-date { font-size: 13px; opacity:0.6; font-family:'Plus Jakarta Sans', sans-serif;}

  .test-stars { color: #fbbf24; font-size: 14px; letter-spacing: 2px;}

  @media (max-width:1024px) { .test-masonry { column-count: 2; } }

  @media (max-width:680px) { .test-masonry { column-count: 1; } #testimonials{ margin:0; border-radius:0; } }

  /* ---------- Contact (Liquid Glass Form) ---------- */

  #contact .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px; align-items:center;}

  .contact-info h2{font-size:clamp(36px,5vw,56px);margin-bottom:24px;}

  .contact-info p.lead{color:var(--text-dim);font-size:18px;line-height:1.8;margin-bottom:40px;max-width:460px;}

  .contact-line{display:flex;gap:20px;align-items:center;padding:24px 0;border-top:1px solid var(--line);}

  .contact-line:last-child{border-bottom:1px solid var(--line);}

  .contact-line .ic{color:var(--bg); background:var(--primary); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(6,78,59,0.2);}

  .contact-line b{display:block;font-size:16px;color:var(--text);margin-bottom:2px;}

  .contact-line span{font-size:15px;color:var(--text-dim);}

  .form-card{

    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--glass-border); border-radius: 32px; padding: 50px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

    position:relative; overflow:hidden;

  }

  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}

  .field{display:flex;flex-direction:column;gap:10px;}

  .field.full{grid-column:1 / -1;}

  .field label{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--primary); font-weight:700;}

  .field input,.field select,.field textarea{

    font-family:'Inter',sans-serif;font-size:16px;color:var(--text);

    background: rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.8);

    border-radius:16px;padding:18px;outline:none;resize:vertical;

    transition:all .3s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);

  }

  .field input:focus,.field select:focus,.field textarea:focus{

    border-color:var(--primary); background:#fff;

    box-shadow:0 0 0 4px rgba(6,78,59,0.1);

  }

  .form-note{font-size:14px;color:var(--text-faint);margin-top:24px; line-height:1.6; text-align:center;}

  #form-msg{margin-top:20px;font-size:15px;color:var(--primary);display:none; text-align:center; font-weight:600;}

  @media (max-width:960px){ #contact .contact-grid{grid-template-columns:1fr; gap:60px;} }

  @media (max-width:560px){ .form-row{grid-template-columns:1fr;} .form-card{padding:30px;} }

  /* ---------- Footer ---------- */

  footer{border-top:1px solid var(--line);padding:80px 0 40px;background:transparent; position:relative; z-index:2;}

  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px;}

  .foot-brand p{color:var(--text-dim);font-size:16px;line-height:1.8;margin-top:20px;max-width:320px;}

  .foot-col h5{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--primary);margin-bottom:24px;}

  .foot-col a{display:block;color:var(--text-dim);font-size:15px;margin-bottom:14px;transition:all .3s; font-weight:500;}

  .foot-col a:hover{color:var(--primary); transform:translateX(5px);}

  .foot-bottom{border-top:1px solid var(--line);padding-top:30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--text-faint);font-size:14px;font-family:'Plus Jakarta Sans',sans-serif;}

  @media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }

  @media (max-width:500px){ .foot-grid{grid-template-columns:1fr;} }

  /* ---------- Trust Strip ---------- */

  #trust { padding: 60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  .trust-inner { display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap; }

  .trust-stat { text-align: center; }

  .trust-stat .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 42px; color: var(--primary); letter-spacing: -2px; line-height: 1; }

  .trust-stat .label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--text-dim); margin-top: 8px; letter-spacing: .1em; text-transform: uppercase; }

  .trust-divider { width: 1px; height: 60px; background: var(--line); }

  @media (max-width: 640px) { .trust-inner { gap: 32px; } .trust-divider { display: none; } }

  /* ---------- About Image ---------- */

  .about-img-wrap { position: relative; }

  .about-img { width: 100%; aspect-ratio: 4/3; border-radius: 28px; object-fit: cover; display: block;

    box-shadow: 0 30px 60px rgba(6,78,59,0.15); border: 4px solid rgba(255,255,255,0.8);

  }

  .about-badge {

    position: absolute; bottom: -24px; right: -24px;

    background: var(--primary); color: var(--bg); border-radius: 20px;

    padding: 24px 28px; box-shadow: 0 20px 40px rgba(6,78,59,0.25);

    font-family: 'Plus Jakarta Sans', sans-serif; min-width: 160px;

  }

  .about-badge .big { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -2px; }

  .about-badge .small { font-size: 14px; font-weight: 500; opacity: 0.8; margin-top: 4px; }

  @media (max-width: 960px) { .about-img-wrap { margin-bottom: 50px; } .about-badge { bottom: -16px; right: -8px; } }

  /* ---------- Service Card Image ---------- */

  .svc-img { width: 100%; height: 180px; object-fit: cover; border-radius: 16px; margin-bottom: 28px;

    display: block; border: 1px solid rgba(255,255,255,0.6);

    transition: transform 0.5s ease;

  }

  .svc-card:hover .svc-img { transform: scale(1.03); }

  .svc-card { overflow: hidden; }

  /* ---------- Process Visual Banner ---------- */

  .process-visual { position: relative; margin-bottom: 80px; border-radius: 28px; overflow: hidden; height: 320px; }

  .process-visual img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.4) saturate(0.8); }

  .process-visual-overlay {

    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;

    background: linear-gradient(135deg, rgba(6,78,59,0.7) 0%, rgba(2,44,34,0.5) 100%);

  }

  .process-visual-overlay h3 { font-size: clamp(28px, 4vw, 46px); color: var(--bg); text-align: center; margin-bottom: 12px; }

  .process-visual-overlay p { color: rgba(248,231,201,0.8); font-size: 18px; text-align: center; max-width: 500px; }

  /* ========== GMB Button & Rating Bar ========== */

  .test-gmb-bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    flex-wrap: wrap;

    margin-top: 60px;

    padding: 32px 40px;

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(20px);

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

    border: 1px solid rgba(248, 231, 201, 0.15);

    border-radius: 24px;

  }

  .test-gmb-rating {

    display: flex;

    align-items: center;

    gap: 16px;

  }

  .test-gmb-stars {

    font-size: 22px;

    color: #fbbf24;

    letter-spacing: 2px;

  }

  .test-gmb-text strong {

    display: block;

    font-size: 16px;

    font-weight: 700;

    color: var(--bg);

    font-family: 'Plus Jakarta Sans', sans-serif;

  }

  .test-gmb-text span {

    font-size: 13px;

    color: rgba(248, 231, 201, 0.6);

  }

  .test-gmb-logo { opacity: 0.9; }

  .btn-gmb {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 28px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.95);

    color: #1a1a1a;

    font-family: 'Plus Jakarta Sans', sans-serif;

    font-weight: 700;

    font-size: 15px;

    border: none;

    cursor: pointer;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 8px 24px rgba(0,0,0,0.2);

  }

  .btn-gmb:hover {

    background: #fff;

    transform: translateY(-3px);

    box-shadow: 0 16px 40px rgba(0,0,0,0.3);

    color: #1a1a1a;

  }

  .btn-gmb i { color: #5f6368; }

  @media (max-width: 680px) {

    .test-gmb-bar { flex-direction: column; gap: 24px; padding: 28px 20px; text-align: center; }

    .test-gmb-rating { flex-wrap: wrap; justify-content: center; }

  }

  /* ========== Services Bottom CTA ========== */

  .svc-bottom-cta {

    text-align: center;

    margin-top: 70px;

    padding: 60px 40px;

    background: var(--glass-bg);

    backdrop-filter: blur(24px);

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

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

    border-radius: 32px;

    box-shadow: var(--glass-shadow), var(--glass-inset);

  }

  .svc-bottom-cta p {

    font-size: 18px;

    color: var(--text-dim);

    margin-bottom: 28px;

  }

  .svc-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

  @media (max-width: 480px) { .svc-bottom-cta { padding: 40px 20px; } }

  /* ========== Process Bottom CTA ========== */

  .process-bottom-cta {

    margin-top: 80px;

    text-align: center;

    padding: 70px 40px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 32px;

    position: relative;

    overflow: hidden;

  }

  .process-bottom-cta::before {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 30% 50%, rgba(13,148,136,0.25) 0%, transparent 60%);

    pointer-events: none;

  }

  .process-bottom-cta h3 {

    font-size: clamp(26px, 4vw, 42px);

    color: var(--bg);

    margin-bottom: 16px;

    position: relative;

  }

  .process-bottom-cta p {

    color: rgba(248, 231, 201, 0.75);

    font-size: 17px;

    max-width: 500px;

    margin: 0 auto 36px;

    line-height: 1.7;

    position: relative;

  }

  .process-cta-btns {

    display: flex;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

    position: relative;

  }

  .process-bottom-cta .btn-ghost {

    border-color: rgba(248, 231, 201, 0.4);

    color: var(--bg);

    background: rgba(255,255,255,0.08);

  }

  .process-bottom-cta .btn-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(248,231,201,0.7); color: var(--bg); }

  @media (max-width: 480px) { .process-bottom-cta { padding: 50px 20px; } }

  /* ========== COMPREHENSIVE RESPONSIVE SYSTEM ========== */

  /* --- Global wrap padding on small screens --- */

  @media (max-width: 640px) {

    .wrap { padding: 0 16px; }

  }

  /* --- Header / Nav --- */

  @media (max-width: 900px) {

    .nav-links a { font-size: 20px; }

  }

  @media (max-width: 480px) {

    header { padding: 16px 0; }

    .logo svg { height: 28px; }

  }

  /* --- Hero Section --- */

  @media (max-width: 900px) {

    #hero { padding: 160px 0 100px; }

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

    .hero-inner { text-align: center; }

    .hero-chips { justify-content: center; }

    .hero-cta { justify-content: center; }

    .hero-visual { margin-top: 20px; }

  }

  @media (max-width: 640px) {

    #hero { padding: 130px 0 80px; }

    .hero-cta { flex-direction: column; align-items: stretch; }

    .hero-cta .btn { width: 100%; justify-content: center; }

    .hero-chips { flex-wrap: wrap; gap: 8px; }

    h1 { font-size: clamp(30px, 8vw, 50px) !important; }

  }

  @media (max-width: 520px) {

    .hero-visual { transform: scale(0.75); transform-origin: top center; height: 320px; }

  }

  /* --- Trust Strip --- */

  @media (max-width: 640px) {

    #trust { padding: 50px 0; }

    .trust-inner { gap: 24px; }

    .trust-divider { display: none; }

    .trust-stat .num { font-size: 32px; }

  }

  /* --- About Section --- */

  @media (max-width: 1024px) {

    .about-main-grid { grid-template-columns: 1fr; gap: 40px; }

  }

  @media (max-width: 768px) {

    #about { margin: 0; border-radius: 0; padding: 80px 0; }

    .about-pillars-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

    .about-bottom-bar { flex-direction: column; text-align: center; gap: 16px; }

    .about-bottom-bar .btn { width: 100%; justify-content: center; }

  }

  @media (max-width: 480px) {

    .about-pillars-grid { grid-template-columns: 1fr; }

    .about-tab-toggle { flex-direction: column; }

    .about-tab-btn { width: 100%; }

  }

  /* --- Services Section --- */

  @media (max-width: 1100px) {

    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  }

  @media (max-width: 680px) {

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

    #services { padding: 80px 0; }

    .svc-filter-bar { gap: 8px; }

    .svc-filter-btn { padding: 8px 16px; font-size: 12.5px; }

  }

  @media (max-width: 480px) {

    .svc-card { padding: 20px; }

    .svc-img-wrap { height: 150px; }

  }

  /* --- Projects / Featured Work Section --- */

  @media (max-width: 960px) {

    .proj-slide { grid-template-columns: 1fr; }

    .proj-slide-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding: 32px 20px; }

    .proj-slide-right { padding: 32px 20px; min-height: 260px; }

    .proj-highlights { grid-template-columns: 1fr 1fr; }

    .projects-header-bar { flex-direction: column; align-items: flex-start; gap: 20px; }

  }

  @media (max-width: 640px) {

    #projects { padding: 80px 0; }

    .proj-filter-bar { gap: 6px; }

    .proj-filter-btn { padding: 7px 14px; font-size: 12px; }

    .proj-slider-ctrl { flex-wrap: wrap; gap: 12px; }

    .proj-slide-right { min-height: 200px; }

    .proj-highlights { grid-template-columns: 1fr; }

  }

  @media (max-width: 480px) {

    .proj-slide-left { padding: 24px 16px; }

    .proj-slider-wrap { border-radius: 20px; }

  }

  /* --- Process Section --- */

  @media (max-width: 980px) {

    .steps-row { grid-template-columns: 1fr; gap: 50px; padding-left: 60px; }

    .step-card { text-align: left; padding-top: 0; position: relative; }

    .step-num { margin: 0 0 20px 0; position: absolute; left: -80px; top: 0px; }

    .steps-row::before { top: 0; bottom: 0; left: 28px; width: 2px; height: 100%; right: auto; background: linear-gradient(180deg, transparent, rgba(6,78,59,0.2), transparent); }

  }

  @media (max-width: 640px) {

    #process { padding: 80px 0; }

    .process-visual { height: 220px; margin-bottom: 50px; }

    .steps-row { padding-left: 50px; gap: 40px; }

    .step-num { left: -64px; width: 50px; height: 50px; font-size: 17px; }

    .steps-row::before { left: 20px; }

  }

  /* --- Testimonials Section --- */

  @media (max-width: 1024px) {

    .test-masonry { column-count: 2; }

  }

  @media (max-width: 680px) {

    .test-masonry { column-count: 1; }

    #testimonials { margin: 0; border-radius: 0; padding: 80px 0; }

    .test-card { padding: 28px 20px; }

  }

  @media (max-width: 480px) {

    .test-card p.body { font-size: 14.5px; }

  }

  /* --- Contact Section --- */

  @media (max-width: 960px) {

    #contact .contact-grid { grid-template-columns: 1fr; gap: 50px; }

    #contact { padding: 80px 0; }

  }

  @media (max-width: 640px) {

    .form-row { grid-template-columns: 1fr; }

    .form-card { padding: 32px 20px; border-radius: 24px; }

    .contact-info h2 { font-size: 32px; }

  }

  @media (max-width: 480px) {

    .contact-line { gap: 14px; }

    .contact-line .ic { width: 40px; height: 40px; }

  }

  /* --- Footer --- */

  @media (max-width: 900px) {

    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    .foot-brand { grid-column: 1 / -1; }

    footer { padding: 60px 0 30px; }

  }

  @media (max-width: 500px) {

    .foot-grid { grid-template-columns: 1fr; gap: 36px; }

    .foot-bottom { flex-direction: column; text-align: center; gap: 8px; }

    .foot-brand p { max-width: 100%; font-size: 14px; }

  }

  /* --- Section headings responsive --- */

  @media (max-width: 640px) {

    .section-head { margin-bottom: 40px; }

    .section-head h2 { font-size: clamp(26px, 7vw, 40px); }

    .section-head p { font-size: 16px; }

  }

  /* --- Eyebrow on mobile --- */

  @media (max-width: 480px) {

    .eyebrow { font-size: 11px; }

  }

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

    *{animation-duration:.001s !important;transition-duration:.2s !important;}

  }