:root{
      --brand:#0B5FFF;
      --brand-2:#0BC27B;
      --ink:#0f172a;
      --muted:#475569;
      --bg:#f8fafc;
      --card:#ffffff;
      --ring: rgba(11,95,255,.25);
      --shadow: 0 10px 24px rgba(2,6,23,.08);
      --radius: 18px;
      --transition: all 0.3s ease;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--ink);background:var(--bg);scroll-behavior:smooth}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block;border-radius:14px}
    
    /* Top nav (desktop) */
    header{
      position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #e2e8f0;
      box-shadow:0 2px 12px rgba(2,6,23,.04);transition:var(--transition)
    }
    .nav{
      max-width:1200px;margin:auto;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:12px 20px
    }
    .brand{display:flex;gap:12px;align-items:center}
    .logo{
      width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
      background:linear-gradient(135deg,var(--brand),#6aa6ff)
    }
    .brand h1{font-size:18px;line-height:1.1;margin:0}
    .brand small{display:block;color:var(--muted);font-weight:500}
    .menu{display:flex;gap:16px}
    .menu a{
      padding:10px 14px;border-radius:12px;color:var(--muted);font-weight:600;transition:var(--transition)
    }
    .menu a.active, .menu a:hover{background:#eef4ff;color:#1e40af}
    .cta{
      background:linear-gradient(135deg,var(--brand-2),#72e4b3);color:#063b2b;
      padding:10px 14px;border-radius:12px;font-weight:800;border:0;cursor:pointer;transition:var(--transition)
    }
    .cta:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(11,194,123,0.3)}

    /* Sections */
    .wrap{max-width:1200px;margin:auto;padding:22px}
    .hero{
      display:grid;grid-template-columns:1.3fr .7fr;gap:22px;align-items:center
    }
    .card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition)}
    .card:hover{transform:translateY(-5px);box-shadow:0 12px 28px rgba(2,6,23,.12)}
    .p24{padding:24px}
    .pill{display:inline-flex;gap:8px;align-items:center;background:#eef4ff;color:#1e40af;border-radius:999px;padding:6px 12px;font-weight:700}
    .h1{font-size:40px;line-height:1.1;margin:14px 0 8px}
    .muted{color:var(--muted)}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .badge{background:#f1f5f9;border:1px solid #e2e8f0;padding:8px 10px;border-radius:12px;font-weight:600;transition:var(--transition)}
    .badge:hover{background:#e2e8f0}

    .grid{
      display:grid;gap:18px
    }
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-4{grid-template-columns:repeat(4,1fr)}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}
    .material-card .title{font-weight:800;margin:10px 0 4px}
    .material-card .small{color:var(--muted);font-size:14px}

    .btn{
      display:inline-flex;gap:8px;align-items:center;border-radius:12px;padding:10px 14px;border:1px solid #cbd5e1;font-weight:800;cursor:pointer;background:#fff;transition:var(--transition)
    }
    .btn:hover{border-color:#94a3b8;transform:translateY(-2px)}
    .btn.primary{background:linear-gradient(135deg,var(--brand),#6aa6ff);color:#fff;border:0}
    .btn.primary:hover{box-shadow:0 4px 12px rgba(11,95,255,0.3)}
    .btn.whatsapp{background:#25D366;color:#063b2b;border:0}
    .btn.whatsapp:hover{box-shadow:0 4px 12px rgba(37,211,102,0.3)}

    .section-title{font-size:26px;margin:0 0 12px}
    .sub{color:var(--muted);margin:0 0 18px}
    .chips{display:flex;flex-wrap:wrap;gap:10px}
    .chip{
      border:1px solid #dbe2ea;background:#fff;padding:10px 12px;border-radius:999px;font-weight:700;cursor:pointer;transition:var(--transition)
    }
    .chip.active{background:#e8fff3;border-color:#86efac}
    .chip:hover{background:#f1f5f9}

    /* Order form */
    form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    form .row.full{grid-template-columns:1fr}
    label{font-weight:700;margin:6px 2px 8px;display:block}
    select,input,textarea{
      width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;font-size:16px;outline:none;transition:var(--transition)
    }
    select:focus,input:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring);border-color:#94a3b8}
    .help{font-size:12px;color:var(--muted)}
    .units{display:flex;gap:10px;flex-wrap:wrap}
    .units .u{padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;cursor:pointer;font-weight:800;background:#fff;transition:var(--transition)}
    .units .u.active{background:#e8fff3;border-color:#86efac}
    .units .u:hover{background:#f1f5f9}
    .divider{height:1px;background:#e2e8f0;margin:18px 0}

    /* Contact */
    .contact-list{display:grid;gap:14px}
    .contact-item{display:flex;gap:12px;align-items:center}
    .contact-item .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef2ff;transition:var(--transition)}
    .contact-item:hover .ico{transform:scale(1.05)}

    footer{padding:30px 22px;color:#475569;text-align:center}

    /* Mobile App Style */
    .app-container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      position: relative;
    }

    /* Bottom Navigation */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      border-top: 1px solid #e2e8f0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 8px 12px;
      z-index: 60;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .bottom-nav.show {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
    .tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 4px;
      border-radius: 12px;
      color: var(--muted);
      font-size: 12px;
      transition: var(--transition);
    }
    .tab.active {
      background: #eef4ff;
      color: var(--brand);
    }
    .tab span {
      font-size: 20px;
    }

    /* Mobile Header */
    .mobile-header {
      display: none;
      position: sticky;
      top: 0;
      z-index: 50;
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      padding: 12px 16px;
      align-items: center;
      justify-content: space-between;
    }
    .mobile-header .brand {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .mobile-header .logo {
      width: 36px;
      height: 36px;
      border-radius: 10px;
    }
    .mobile-header h1 {
      font-size: 16px;
      margin: 0;
    }
    .mobile-header small {
      font-size: 12px;
    }
    .mobile-cta {
      background: linear-gradient(135deg, var(--brand-2), #72e4b3);
      color: #063b2b;
      padding: 8px 12px;
      border-radius: 10px;
      font-weight: 800;
      border: 0;
      cursor: pointer;
      font-size: 14px;
    }

    /* Mobile Hero */
    .mobile-hero {
      padding: 20px 16px;
      background: linear-gradient(135deg, #f0f7ff, #e6f7f0);
      border-radius: 0 0 24px 24px;
      margin-bottom: 20px;
    }
    .mobile-hero .pill {
      margin-bottom: 10px;
    }
    .mobile-hero .h1 {
      font-size: 28px;
      margin: 10px 0;
    }
    .mobile-hero-image {
      margin-top: 20px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    /* Mobile Material Cards */
    .mobile-material-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      margin-bottom: 16px;
      transition: var(--transition);
    }
    .mobile-material-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
    .mobile-material-card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
    .mobile-material-card .content {
      padding: 16px;
    }
    .mobile-material-card .title {
      font-weight: 800;
      margin: 0 0 8px;
      font-size: 18px;
    }
    .mobile-material-card .chips {
      margin-top: 12px;
    }
    .mobile-material-card .chip {
      font-size: 12px;
      padding: 6px 10px;
    }

    /* Mobile Order Form */
    .mobile-order-form {
      padding: 16px;
    }
    .mobile-order-form .card {
      margin-bottom: 20px;
    }
    .mobile-order-form .section-title {
      font-size: 22px;
    }

    /* Mobile Contact */
    .mobile-contact {
      padding: 16px;
    }
    .mobile-contact .card {
      margin-bottom: 20px;
    }

    /* Responsive / Mobile app vibe */
    @media (max-width: 860px){
      body {
        background: #fff;
      }
      .app-container {
        box-shadow: none;
        max-width: 100%;
        padding: 10px;
      }
      header {
        display: none;
      }
      .mobile-header {
        display: flex;
      }
      .hero {
        display: none;
      }
      .menu {
        display: none;
      }
      .grid.cols-2, .grid.cols-3, .grid.cols-4 {
        grid-template-columns: 1fr;
      }
      .wrap {
        padding: 0;
        padding-bottom: 80px; /* space for bottom nav */
      }
      .h1 {
        font-size: 28px;
      }
      .section-title {
        font-size: 22px;
      }
      
      /* Form polish on mobile */
      form .row {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .units {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .u {
        width: 100%;
        text-align: center;
      }
      
      /* Bottom nav */
      .bottom-nav {
        display: grid;
      }
      
      /* Small touch targets */
      select, input, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
      }
      
      /* Improved mobile padding */
      .mobile-hero {
        padding: 24px 20px;
      }
      .mobile-order-form, .mobile-contact {
        padding: 20px;
      }
      #mobileMaterialsList {
        padding: 0 20px;
      }
      #home .chips {
        padding: 0 20px;
      }
      #home > div:last-child {
        padding: 0 20px 20px;
      }
    }

    @media (min-width: 861px) {
      .app-container {
        max-width: none;
        box-shadow: none;
      }
      .mobile-header {
        display: none;
      }
      .mobile-hero {
        display: none;
      }
      .bottom-nav {
        display: none;
      }
    }