:root{
      /* Palette inspired by the BenoliTech/SensoBlock look and feel (dark + amber + pastel accents) */
      --bg: #0B0B0E;
      --bg2:#101018;
      --card:#141421;
      --card2:#17172A;
      --text:#F2F3F7;
      --muted:#B9BBC8;
      --muted2:#8E92A8;

      --accent:#F09838;       /* amber */
      --accent2:#E6882E;
      --accent3:#FFBC5A;
      --line: rgba(255,255,255,.10);
      --shadow: 0 20px 60px rgba(0,0,0,.55);

      --radius: 18px;
      --radius2: 26px;
      --max: 1120px;

      --heroGrad:
        radial-gradient(1200px 600px at 15% 0%, rgba(240,152,56,.32), transparent 55%),
        radial-gradient(900px 500px at 80% 10%, rgba(255,188,90,.20), transparent 55%),
        radial-gradient(800px 600px at 65% 85%, rgba(169, 234, 217, .12), transparent 55%),
        linear-gradient(180deg, #0B0B0E 0%, #0E0E14 55%, #0B0B0E 100%);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background: var(--bg);
      line-height:1.55;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:12px 16px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:var(--text);
      font-weight:650;
      transition:.2s transform, .2s background, .2s border-color;
      user-select:none;
    }
    .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
    .btn.primary{
      background: linear-gradient(180deg, var(--accent3), var(--accent));
      color:#18130B;
      border-color: rgba(0,0,0,.08);
      box-shadow: 0 12px 28px rgba(240,152,56,.22);
    }
    .btn.primary:hover{background: linear-gradient(180deg, #FFD08A, var(--accent2))}
    .btn.ghost{background:transparent}
    .pill{
      display:inline-flex;align-items:center;gap:10px;
      padding:8px 12px;border-radius:999px;
      background:rgba(240,152,56,.10);
      border:1px solid rgba(240,152,56,.25);
      color: var(--accent3);
      font-weight:650;
      font-size:13px;
    }

    /* Header */
    header{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(11,11,14,.72);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:14px 0;
      gap:18px;
    }
    .nav-logo{
      display:flex;
      align-items:center;
      gap:14px;
      color:#F6EFE6;
      text-decoration:none;
      font-family:"Arial Rounded MT Bold", "Avenir Next", Avenir, "Segoe UI", sans-serif;
      font-size:clamp(1.5rem, 2.2vw, 2.15rem);
      font-weight:800;
      line-height:1;
      letter-spacing:0;
      white-space:nowrap;
    }
    .nav-logo-mark{
      width:46px;
      height:46px;
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:1fr 1fr;
      gap:6px;
      flex:0 0 auto;
    }
    .nav-logo-mark span{background:#FFBC59}
    .nav-logo-mark span:nth-child(1),
    .nav-logo-mark span:nth-child(3),
    .nav-logo-mark span:nth-child(4){border-radius:1px}
    .nav-logo-mark span:nth-child(2){
      transform:rotate(45deg) scale(.88);
      border-radius:1px;
    }
    .nav-logo-text{
      color:#F6E5D1;
      background:linear-gradient(90deg, #FAFAF8 0%, #F8F5F0 52%, #EBC79C 100%);
      background-clip:text;
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    nav.links{
      display:flex;
      gap:8px;
      align-items:center;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
    }
    nav.links a{
      position:relative;
      color:var(--text);
      font-weight:800;
      font-size:14px;
      padding:10px 14px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background:#171720;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.20);
      transition:.2s background,.2s color,.2s border-color,.2s transform,.2s box-shadow;
    }
    nav.links a::after{
      content:none;
    }
    nav.links a:hover{
      transform:translateY(-1px);
      background:#20202A;
      border-color:rgba(240,152,56,.55);
      color:#FFD08A;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(240,152,56,.12);
    }
    .nav-cta{display:flex;gap:10px;align-items:center}

    /* Hero */
    .hero{
      position:relative;
      padding:64px 0 34px;
      background: var(--heroGrad);
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:40px;
      align-items:center;
    }
    h1{
      margin:14px 0 14px;
      font-size: clamp(34px, 3.6vw, 52px);
      line-height:1.08;
      letter-spacing:-.7px;
    }
    .sub{
      font-size:18px;
      color:var(--muted);
      max-width: 58ch;
      margin: 0 0 18px;
    }
    .kicker{
      display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 10px;
    }
    .kicker .tag{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-weight:650;
      font-size:13px;
    }
    .sensor-group{
      margin-top:18px;
      max-width:680px;
    }
    .sensor-title{
      margin:0 0 9px;
      color:var(--accent3);
      font-size:13px;
      font-weight:850;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .sensor-strip{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:0;
    }
    .sensor-strip span{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.045);
      color:var(--muted);
      font-size:0;
      font-weight:700;
      transition:.2s background,.2s border-color,.2s color,.2s transform;
    }
    .sensor-strip span::after{
      content:attr(data-label);
      position:absolute;
      left:50%;
      bottom:calc(100% + 9px);
      z-index:5;
      width:max-content;
      max-width:140px;
      padding:6px 9px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.14);
      background:#171720;
      color:var(--text);
      box-shadow:0 10px 24px rgba(0,0,0,.32);
      font-size:12px;
      font-weight:800;
      line-height:1.2;
      opacity:0;
      pointer-events:none;
      transform:translate(-50%, 4px);
      transition:.16s opacity,.16s transform;
    }
    .sensor-strip span::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:calc(100% + 4px);
      z-index:5;
      width:8px;
      height:8px;
      background:#171720;
      border-right:1px solid rgba(255,255,255,.14);
      border-bottom:1px solid rgba(255,255,255,.14);
      opacity:0;
      pointer-events:none;
      transform:translate(-50%, 4px) rotate(45deg);
      transition:.16s opacity,.16s transform;
    }
    .sensor-strip span:hover{
      transform:translateY(-1px);
      border-color:rgba(240,152,56,.40);
      background:rgba(240,152,56,.12);
      color:var(--accent3);
    }
    .sensor-strip span:hover::after,
    .sensor-strip span:hover::before{
      opacity:1;
      transform:translate(-50%, 0);
    }
    .sensor-strip span:hover::before{
      transform:translate(-50%, 0) rotate(45deg);
    }
    .sensor-strip svg{
      width:20px;
      height:20px;
      fill:currentColor;
      stroke:currentColor;
      stroke-width:0;
    }
    .funding-banner{
      padding:18px 0 0;
      background:#0B0B0E;
    }
    .funding-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding:14px 16px;
      border-radius:var(--radius);
      border:1px solid rgba(240,152,56,.22);
      background:linear-gradient(180deg, rgba(240,152,56,.10), rgba(255,255,255,.03));
    }
    .funding-box p{
      margin:0;
      color:var(--muted);
      font-weight:650;
    }
    .funding-box b{color:var(--text)}

    .heroCard{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      padding: 18px;
      position:relative;
      overflow:hidden;
    }
    .heroCard:before{
      content:"";
      position:absolute;inset:-2px;
      background:
        radial-gradient(420px 240px at 20% 10%, rgba(240,152,56,.25), transparent 55%),
        radial-gradient(360px 260px at 85% 70%, rgba(169,234,217,.14), transparent 55%);
      pointer-events:none;
    }
    .heroCard > *{position:relative}
    .device{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.25);
      min-height: 360px;
      display:grid;
      place-items:center;
    }
    .device picture{
      width:100%;
      height:100%;
      display:block;
    }
    .device img.product-photo{
      width:100%;
      height:100%;
      min-height:360px;
      object-fit:cover;
    }
    .mini{
      display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;
    }
    .mini .box{
      border-radius:14px;
      padding:12px;
      background: rgba(11,11,14,.55);
      border:1px solid rgba(255,255,255,.10);
    }
    .mini .box b{display:block;font-size:13px}
    .mini .box p{margin:4px 0 0;font-size:12.5px;color:var(--muted2)}

    /* Sections */
    section{padding:58px 0}
    .sectionTitle{
      display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
      margin-bottom:18px;
    }
    h2{
      margin:0;
      font-size: clamp(24px, 2.6vw, 34px);
      letter-spacing:-.4px;
    }
    .lead{margin:6px 0 0;color:var(--muted);max-width:70ch}

    .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
    .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}

    .card{
      border-radius: var(--radius);
      padding:18px;
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }
    .card h3{margin:0 0 6px;font-size:16px;letter-spacing:-.2px}
    .card p{margin:0;color:var(--muted)}
    .icon{
      width:38px;height:38px;border-radius:14px;
      background: rgba(240,152,56,.12);
      border:1px solid rgba(240,152,56,.25);
      display:grid;place-items:center;
      margin-bottom:12px;
    }
    .icon svg{width:20px;height:20px;fill:var(--accent3)}
    .split{
      display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;
      margin-top:18px;
    }
    .media{
      border-radius: var(--radius);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      display:grid;place-items:center;
      min-height: 290px;
    }
    .media picture{
      display:block;
      width:100%;
    }
    .media img.product-photo{
      width:100%;
      height:100%;
      min-height: 290px;
      object-fit:cover;
    }
    .product-carousel{
      position:relative;
      width:100%;
      overflow:hidden;
      border-radius:14px;
      background:
        radial-gradient(420px 260px at 50% 48%, rgba(240,152,56,.22), transparent 62%),
        #111118;
      border:1px solid rgba(255,255,255,.08);
    }
    .product-slide{
      display:none;
      width:100%;
      aspect-ratio:16 / 9;
      object-fit:cover;
    }
    .product-slide.is-active{
      display:block;
    }
    .product-carousel picture{
      display:block;
      width:100%;
    }
    .carousel-btn{
      position:absolute;
      top:50%;
      display:grid;
      width:42px;
      height:42px;
      place-items:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(11,11,14,.72);
      color:var(--text);
      padding:0;
      font-size:0;
      transform:translateY(-50%);
      cursor:pointer;
      transition:.2s background,.2s color,.2s border-color;
    }
    .carousel-btn::before{
      content:'';
      width:10px;
      height:10px;
      border-top:2px solid currentColor;
      border-right:2px solid currentColor;
    }
    .carousel-btn.prev::before{transform:rotate(-135deg)}
    .carousel-btn.next::before{transform:rotate(45deg)}
    .carousel-btn:hover{
      background:rgba(240,152,56,.18);
      border-color:rgba(240,152,56,.42);
      color:var(--accent3);
    }
    .carousel-btn.prev{left:12px}
    .carousel-btn.next{right:12px}
    .carousel-status{
      position:absolute;
      left:50%;
      bottom:12px;
      display:inline-flex;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(11,11,14,.68);
      transform:translateX(-50%);
    }
    .carousel-dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:rgba(255,255,255,.34);
    }
    .carousel-dot.is-active{
      background:var(--accent3);
    }
    .media img.dashboard-shot{
      width:100%;
      aspect-ratio: 16 / 9;
      object-fit:cover;
    }
    .media .caption{
      padding:14px 16px;
      font-size:12.5px;
      color:var(--muted2);
      border-top:1px solid rgba(255,255,255,.08);
      width:100%;
      background: rgba(11,11,14,.55);
    }
    .list{
      margin:0;padding:0;list-style:none;display:grid;gap:10px
    }
    .list li{
      display:flex;gap:10px;align-items:flex-start;
      padding:12px;border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
    }
    .check{
      width:22px;height:22px;border-radius:8px;
      display:grid;place-items:center;
      background: rgba(240,152,56,.16);
      border:1px solid rgba(240,152,56,.28);
      flex:0 0 auto;
      margin-top:1px;
    }
    .check svg{width:14px;height:14px;fill:var(--accent3)}
    .list b{display:block;font-size:14px}
    .list span{display:block;color:var(--muted);font-size:13px;margin-top:2px}

    /* Use cases */
    .case{
      padding:16px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(240,152,56,.08), rgba(255,255,255,.02));
    }
    .case small{color:var(--muted2);font-weight:700;letter-spacing:.08em}
    .case h3{margin:8px 0 6px}
    .case p{margin:0;color:var(--muted)}

    /* CTA */
    .cta{
      padding:58px 0;
      background:
        radial-gradient(900px 600px at 25% 10%, rgba(240,152,56,.28), transparent 60%),
        radial-gradient(900px 600px at 85% 75%, rgba(169,234,217,.14), transparent 60%),
        linear-gradient(180deg, #0B0B0E 0%, #0E0E14 100%);
      border-top:1px solid rgba(255,255,255,.08);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .ctaBox{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      padding: clamp(22px, 4vw, 36px);
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:22px;
    }
    .ctaBox h2{margin:0;max-width:800px}
    .ctaBox p{margin:10px 0 0;color:var(--muted);max-width:78ch}
    .ctaActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
    .ctaNote{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:16px;
      color:var(--muted2);
      font-size:13px;
      font-weight:700;
    }
    .ctaNote span{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:999px;
      padding:7px 10px;
    }

    /* Footer */
    footer{
      padding:28px 0 40px;
      color:var(--muted2);
      font-size:13px;
    }
    .foot{
      display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px
    }
    .foot .left{display:flex;align-items:center;gap:10px}
    .benoli{
      width:26px;height:26px;border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      padding:4px;
    }

    /* Responsive */
    @media (max-width: 920px){
      .heroGrid{grid-template-columns:1fr;gap:18px}
      nav.links{display:none}
      .ctaBox{grid-template-columns:1fr}
      .ctaActions{justify-content:flex-start}
      .funding-box{align-items:flex-start;flex-direction:column}
    }
    @media (max-width: 860px){
      .grid3{grid-template-columns:1fr}
      .grid2{grid-template-columns:1fr}
      .split{grid-template-columns:1fr}
      .media{min-height: 240px}
    }

.accent-text { color: var(--accent3); }
.inline-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.inline-actions-tight { gap: 10px; margin-top: 14px; }
.flush-top { margin-top: 0; }
.muted-copy-spaced { color: var(--muted); margin-top: 6px; }
.grid-tight { margin-top: 14px; }
.compact-soft-card { padding: 14px; background: rgba(255,255,255,.03); }
.compact-card-title { margin: 0 0 6px; font-size: 14px; }
.compact-card-copy { margin: 0; color: var(--muted); font-size: 13px; }
.footer-brand-line { color: var(--text); font-weight: 700; }
.footer-actions { display: flex; gap: 14px; flex-wrap: wrap; }