/* ============================================================
   Digitized Pattern Solutions — Home Page Stylesheet
   Used by: index.html
============================================================ */

  :root {
    --bg:#f5f2ee; --white:#fff; --dark:#1a1a2e; --ink:#2c2c3e; --muted:#7a7a8c; --border:#d8d4cc;
    --coral:#ff5c35; --teal:#00c2a8; --gold:#f0b429; --violet:#7c3aed; --sky:#0ea5e9; --lime:#22c55e;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:'Barlow',sans-serif;font-weight:400;overflow-x:hidden}

  /* NAV */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:64px;background:rgba(195,187,175,.98);backdrop-filter:blur(10px);border-bottom:1.5px solid #b8b0a4}
  .nav-logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.08em;color:var(--dark);text-decoration:none}
  .nav-logo span{color:var(--coral)}
  .nav-links{display:flex;gap:36px;list-style:none}
  .nav-links a{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
  .nav-links a:hover{color:var(--dark)}
  .nav-cta{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);background:var(--coral);padding:10px 22px;text-decoration:none;border-radius:2px;transition:background .2s,transform .15s}
  .nav-cta:hover{background:#e04a26;transform:translateY(-1px)}

  /* HERO */
  .hero{min-height:100vh;padding:100px 48px 60px;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
  .badge{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--border);border-radius:100px;padding:6px 14px 6px 8px;margin-bottom:28px;opacity:0;animation:fadeUp .7s .1s forwards}
  .badge-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:pulseDot 2s infinite}
  .badge span{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(68px,7.5vw,108px);line-height:.93;letter-spacing:.02em;color:var(--dark);margin-bottom:28px;opacity:0;animation:fadeUp .7s .25s forwards}
  h1 .ac{color:var(--coral)} h1 .ac2{color:var(--teal)}
  .hero-desc{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:40px;max-width:440px;opacity:0;animation:fadeUp .7s .4s forwards}
  .hero-desc strong{color:var(--ink);font-weight:600}
  .hero-actions{display:flex;gap:14px;align-items:center;opacity:0;animation:fadeUp .7s .55s forwards}
  .btn-primary{font-family:'Barlow',sans-serif;font-weight:700;font-size:15px;color:var(--white);background:var(--coral);padding:14px 32px;text-decoration:none;border-radius:4px;transition:all .2s;box-shadow:0 4px 16px rgba(255,92,53,.25)}
  .btn-primary:hover{background:#e04a26;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,92,53,.35)}
  .btn-ghost{font-family:'Barlow',sans-serif;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .2s}
  .btn-ghost:hover{color:var(--dark)}
  .btn-ghost:hover svg{transform:translateX(3px)}
  .btn-ghost svg{transition:transform .2s}

  /* TRACE WINDOW */
  .hero-right{position:relative;height:520px;opacity:0;animation:fadeIn 1s .7s forwards}
  .trace-window{position:absolute;inset:0;background:#f8f8f6;border-radius:12px;border:1.5px solid var(--border);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.09)}
  .trace-window::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.07) 1px,transparent 1px);background-size:18px 18px;z-index:0}
  .tw-titlebar{position:relative;z-index:3;height:40px;background:#ececea;border-bottom:1.5px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:7px}
  .tw-dot{width:11px;height:11px;border-radius:50%}
  .tw-dot-r{background:#ff5f57} .tw-dot-y{background:#febc2e} .tw-dot-g{background:#28c840}
  .tw-title{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-left:8px;text-transform:uppercase}
  .tw-status{margin-left:auto;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;color:#28c840;display:flex;align-items:center;gap:5px}
  .tw-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#28c840;animation:pulseDot 1.5s infinite}
  .ruler-h{position:absolute;top:40px;left:0;right:0;height:20px;background:#ececea;border-bottom:1px solid var(--border);z-index:2}
  .ruler-v{position:absolute;top:60px;left:0;bottom:0;width:20px;background:#ececea;border-right:1px solid var(--border);z-index:2}
  .tw-body{position:absolute;top:60px;left:20px;right:0;bottom:0;z-index:1;overflow:hidden}
  .trace-svg{width:100%;height:100%}

  /* Path draw animations — each shape draws in sequence */
  @keyframes d1{from{stroke-dashoffset:900} to{stroke-dashoffset:0}}
  @keyframes d2{from{stroke-dashoffset:700} to{stroke-dashoffset:0}}
  @keyframes d3{from{stroke-dashoffset:1100} to{stroke-dashoffset:0}}
  @keyframes d4{from{stroke-dashoffset:650} to{stroke-dashoffset:0}}
  @keyframes d5{from{stroke-dashoffset:1300} to{stroke-dashoffset:0}}
  @keyframes d6{from{stroke-dashoffset:780} to{stroke-dashoffset:0}}
  @keyframes d7{from{stroke-dashoffset:920} to{stroke-dashoffset:0}}

  .p1{stroke-dasharray:900; stroke-dashoffset:900; animation:d1 2.2s ease-in-out 1.0s forwards}
  .p2{stroke-dasharray:700; stroke-dashoffset:700; animation:d2 1.8s ease-in-out 1.5s forwards}
  .p3{stroke-dasharray:1100;stroke-dashoffset:1100;animation:d3 2.6s ease-in-out 2.0s forwards}
  .p4{stroke-dasharray:650; stroke-dashoffset:650; animation:d4 1.7s ease-in-out 2.5s forwards}
  .p5{stroke-dasharray:1300;stroke-dashoffset:1300;animation:d5 3.0s ease-in-out 3.0s forwards}
  .p6{stroke-dasharray:780; stroke-dashoffset:780; animation:d6 2.0s ease-in-out 3.5s forwards}
  .p7{stroke-dasharray:920; stroke-dashoffset:920; animation:d7 2.2s ease-in-out 4.0s forwards}

  /* Node dots */
  @keyframes nodeIn{from{opacity:0;r:0} 60%{r:5} to{opacity:1;r:3.5}}
  .nd{opacity:0;animation:nodeIn .4s ease-out forwards}
  .nd1{animation-delay:3.3s} .nd2{animation-delay:3.4s} .nd3{animation-delay:3.5s} .nd4{animation-delay:3.6s}
  .nd5{animation-delay:3.8s} .nd6{animation-delay:4.0s} .nd7{animation-delay:4.2s} .nd8{animation-delay:4.4s}
  .nd9{animation-delay:4.7s} .nd10{animation-delay:5.0s} .nd11{animation-delay:5.3s} .nd12{animation-delay:5.6s}
  .nd13{animation-delay:5.9s} .nd14{animation-delay:6.2s} .nd15{animation-delay:6.5s}

  /* Scan line */
  @keyframes scan{from{transform:translateY(-4px);opacity:.6} to{transform:translateY(465px);opacity:0}}
  .scanline{animation:scan 2.5s ease-in .8s 1 forwards}

  /* Moving crosshair cursor */
  @keyframes cur{
    0%  {cx:62; cy:42;  opacity:0} 2%{opacity:1}
    8%  {cx:220;cy:20}  14%{cx:378;cy:42} 18%{cx:402;cy:88} 22%{cx:38;cy:88}
    28% {cx:50; cy:124} 34%{cx:102;cy:132} 38%{cx:86;cy:200} 42%{cx:30;cy:200}
    48% {cx:152;cy:148} 52%{cx:196;cy:112} 56%{cx:240;cy:148} 60%{cx:240;cy:200}
    66% {cx:302;cy:112} 70%{cx:420;cy:110} 74%{cx:430;cy:196} 78%{cx:290;cy:204}
    82% {cx:68; cy:232} 86%{cx:186;cy:260} 90%{cx:148;cy:312} 92%{cx:30;cy:260}
    96% {cx:440;cy:232} 98%{cx:474;cy:272} 100%{cx:406;cy:272;opacity:0}
  }
  .cursor{animation:cur 14s ease-in-out 1.0s infinite;opacity:0}

  /* Coord text cycling */
  @keyframes c1{0%,100%{opacity:0}4%,22%{opacity:1}26%,99%{opacity:0}}
  @keyframes c2{0%,26%{opacity:0}30%,46%{opacity:1}50%,99%{opacity:0}}
  @keyframes c3{0%,50%{opacity:0}54%,70%{opacity:1}74%,99%{opacity:0}}
  @keyframes c4{0%,74%{opacity:0}78%,94%{opacity:1}98%,99%{opacity:0}}
  .ct1{animation:c1 14s 1.0s infinite;opacity:0}
  .ct2{animation:c2 14s 1.0s infinite;opacity:0}
  .ct3{animation:c3 14s 1.0s infinite;opacity:0}
  .ct4{animation:c4 14s 1.0s infinite;opacity:0}

  /* STATS */
  .stats-bar{display:grid;grid-template-columns:repeat(4,1fr);margin:0 48px 80px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;background:var(--white);box-shadow:0 4px 20px rgba(0,0,0,.04);position:relative;z-index:1;opacity:0;animation:fadeUp .7s .9s forwards}
  .stat{padding:28px 24px 24px;border-right:1.5px solid var(--border)}
  .stat:last-child{border-right:none}
  .stat-bar-top{height:3px;border-radius:2px;margin-bottom:16px}
  .stat-num{font-family:'Bebas Neue',sans-serif;font-size:44px;line-height:1;margin-bottom:4px}
  .stat-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

  /* SECTIONS */
  section.section{padding:80px 48px;border-top:1.5px solid var(--border)}
  .section-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,4.5vw,64px);line-height:1;letter-spacing:.02em;color:var(--dark);margin-bottom:48px}

  /* BEFORE/AFTER */
  .ba-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.06)}
  .ba-panel{background:var(--white);padding:40px 36px;display:flex;flex-direction:column}
  .ba-label{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:24px;align-self:flex-start}
  .ba-visual{flex:1;display:flex;align-items:center;justify-content:center;background:#fafaf8;border-radius:10px;padding:28px;min-height:240px;position:relative;overflow:hidden}
  .ba-visual.paper{background:#f5ede2;background-image:repeating-linear-gradient(0deg,transparent,transparent 24px,rgba(0,0,0,.03) 24px,rgba(0,0,0,.03) 25px)}
  .ba-caption{margin-top:20px;font-size:14px;color:var(--muted);line-height:1.6}
  .ba-caption strong{color:var(--ink)}
  .ba-divider{width:56px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--dark);gap:12px}
  .ba-arrow{width:36px;height:36px;background:var(--coral);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .ba-divider-text{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.1em;color:rgba(255,255,255,.3);writing-mode:vertical-rl}

  /* PATTERNS GRID */
  .patterns-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .pattern-card{border-radius:12px;overflow:hidden;border:1.5px solid var(--border);background:var(--white);transition:transform .25s,box-shadow .25s}
  .pattern-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
  .pattern-card-inner{padding:24px;display:flex;align-items:center;justify-content:center;background:#fafaf8;height:160px}
  .pattern-card-label{padding:12px 16px;border-top:1.5px solid var(--border)}
  .pcname{font-weight:600;font-size:13px;color:var(--dark);display:block;margin-bottom:4px}
  .pchip{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:100px;color:var(--white);display:inline-block}

  /* STEPS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .step{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:32px 24px;position:relative;transition:transform .25s,box-shadow .25s;overflow:hidden}
  .step:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
  .step-accent{position:absolute;top:0;left:0;right:0;height:4px;border-radius:10px 10px 0 0}
  .step-num{font-family:'Bebas Neue',sans-serif;font-size:64px;line-height:1;opacity:.12;margin-bottom:12px}
  .step-iw{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
  .step h3{font-family:'Barlow',sans-serif;font-weight:700;font-size:17px;margin-bottom:10px;color:var(--dark)}
  .step p{font-size:14px;line-height:1.65;color:var(--muted)}

  /* SERVICES */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .service-card{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:32px 28px;transition:transform .25s,box-shadow .25s}
  .service-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.08)}
  .siw{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
  .service-card h3{font-family:'Barlow',sans-serif;font-weight:700;font-size:19px;margin-bottom:12px;color:var(--dark)}
  .service-card p{font-size:14px;line-height:1.65;color:var(--muted)}

  /* CLIENTS */
  .clients-wrap{display:flex;flex-wrap:wrap;gap:10px}
  .client-chip{font-family:'Barlow',sans-serif;font-weight:600;font-size:13px;padding:10px 20px;border-radius:100px;border:1.5px solid var(--border);background:var(--white);color:var(--ink);cursor:default;transition:all .2s}
  .client-chip:hover{border-color:var(--coral);color:var(--coral);transform:scale(1.03)}

  /* CTA */
  .cta-band{margin:0 48px 80px;background:var(--dark);border-radius:16px;padding:64px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;position:relative;overflow:hidden}
  .cta-band::before{content:'';position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,92,53,.15) 0%,transparent 70%)}
  .cta-band h2{color:var(--white);margin-bottom:12px}
  .cta-band p{font-size:16px;color:rgba(255,255,255,.5);max-width:480px;line-height:1.7;margin:0}
  .cta-contact{text-align:center;z-index:1}
  .cta-contact a{display:block;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:6px;transition:color .2s}
  .cta-contact a:hover{color:var(--white)}
  .cta-btn{display:inline-block;margin-top:20px;font-family:'Barlow',sans-serif;font-weight:700;font-size:15px;color:var(--dark);background:var(--white);padding:14px 32px;border-radius:6px;text-decoration:none;transition:all .2s}
  .cta-btn:hover{background:var(--coral);color:var(--white);transform:translateY(-2px)}

  /* FOOTER */
  footer{border-top:1.5px solid var(--border);padding:32px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .footer-logo{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:.06em;color:var(--dark)}
  .footer-logo span{color:var(--coral)}
  .footer-links{display:flex;gap:28px;list-style:none}
  .footer-links a{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}
  .footer-links a:hover{color:var(--dark)}
  .footer-copy{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.08em}

  /* ANIMATIONS */
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
  .blink{animation:blink 2s infinite}

  /* RESPONSIVE */
  @media(max-width:1100px){.patterns-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:900px){
  nav{padding:0 16px} .nav-links{display:none}
    button.hamburger{display:flex}
    .hero{grid-template-columns:1fr;padding:88px 20px 40px} .hero-right{height:280px}
    .stats-bar{grid-template-columns:1fr 1fr;margin:0 16px 48px}
    .steps{grid-template-columns:1fr 1fr;gap:20px} .services-grid{grid-template-columns:1fr}
    .patterns-grid{grid-template-columns:1fr 1fr}
    .ba-grid{grid-template-columns:1fr} .ba-divider{width:100%;height:52px;flex-direction:row} .ba-divider-text{writing-mode:horizontal-tb}
    section.section{padding:52px 20px}
    .cta-band{margin:0 16px 52px;padding:32px 20px;grid-template-columns:1fr}
    .cta-contact{flex-direction:column;align-items:flex-start;gap:12px}
    footer{padding:24px 16px;flex-direction:column;align-items:flex-start;gap:20px}
    .footer-links{flex-wrap:wrap;gap:16px}
    /* automotive band */
    .auto-band-inner{grid-template-columns:1fr !important;gap:28px !important}
    .auto-shapes-row{grid-template-columns:1fr 1fr !important}
    .auto-bullets{grid-template-columns:1fr !important;gap:10px !important}
    /* why work with us */
    .why-grid{grid-template-columns:1fr !important;gap:32px !important}
    .trust-cards{grid-template-columns:1fr 1fr !important}
    .team-row{flex-wrap:wrap;gap:16px}
  }
  @media(max-width:500px){
    .stats-bar{grid-template-columns:1fr 1fr}
    .trust-cards{grid-template-columns:1fr !important}
    .auto-shapes-row{grid-template-columns:1fr 1fr !important}
    .hero-right{height:220px}
    .steps{grid-template-columns:1fr}
  }
  /* Hamburger + mobile drawer */
  button.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;justify-content:center;gap:5px;z-index:200}
  button.hamburger span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;transition:all .25s}
  button.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  button.hamburger.open span:nth-child(2){opacity:0}
  button.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-drawer{display:none;position:fixed;top:64px;left:0;right:0;background:rgba(195,187,175,.99);backdrop-filter:blur(12px);border-bottom:1.5px solid #b8b0a4;padding:20px;z-index:99;flex-direction:column}
  .mobile-drawer.open{display:flex}
  .mobile-drawer a{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--border);transition:color .2s}
  .mobile-drawer a.drawer-cta{border-bottom:none;margin-top:12px;background:var(--coral);color:white;text-align:center;padding:14px;border-radius:4px;letter-spacing:.1em}
  @media(max-width:900px){button.hamburger{display:flex}}