*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --blue: #2A6DF4;
      --blue-2: #5B9BFF;
      --blue-3: #D6E8FF;
      --orange: #F97316;
      --orange-2: #FDBA74;
      --bg:     #FFFFFF;
      --bg-2:   #F5F7FF;
      --bg-3:   #EEF2FF;
      --card:   #FFFFFF;
      --text:   #0D1117;
      --text-2: #4B5563;
      --text-3: #9CA3AF;
      --border: rgba(0,0,0,0.07);
      --nav-bg: rgba(255,255,255,0.85);
      --shadow: 0 2px 40px rgba(42,109,244,0.10);
    }
    [data-theme="dark"] {
      --bg:     #080C14;
      --bg-2:   #0F1623;
      --bg-3:   #162033;
      --card:   #111927;
      --text:   #EDF2FF;
      --text-2: #7C8FA6;
      --text-3: #3D5166;
      --border: rgba(255,255,255,0.07);
      --nav-bg: rgba(8,12,20,0.90);
      --shadow: 0 2px 40px rgba(0,0,0,0.40);
    }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      transition: background .35s, color .35s;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ─── NAV ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 56px; height: 72px;
      background: var(--nav-bg);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border);
    }
    .nav-brand {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
    }
    .nav-brand img {
      width: 40px; height: 40px; object-fit: contain;
    }
    .nav-brand span {
      font-family: 'Sora', sans-serif; font-weight: 800;
      font-size: 21px; letter-spacing: 2.5px;
      background: linear-gradient(130deg, var(--blue), var(--blue-2));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .nav-links {
      display: flex; align-items: center; gap: 36px;
    }
    .nav-links a {
      font-size: 15px; font-weight: 500; color: var(--text-2);
      text-decoration: none; transition: color .2s;
    }
    .nav-links a:hover { color: var(--blue); }
    .nav-cta {
      background: var(--blue) !important; color: white !important;
      padding: 10px 24px !important; border-radius: 50px;
      font-weight: 600 !important; transition: opacity .2s, transform .2s !important;
    }
    .nav-cta:hover { opacity: .9; transform: translateY(-1px); }
    .nav-actions { display: flex; align-items: center; gap: 8px; }

    /* Dark/lang toggles */
    .icon-btn {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--card);
      color: var(--text-2); font-size: 17px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: border-color .2s, color .2s;
    }
    .icon-btn:hover { border-color: var(--blue); color: var(--blue); }
    .lang-btn {
      font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: .5px;
    }

    /* ─── HERO ─── */
    #hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 120px 56px 80px; position: relative; overflow: hidden;
    }
    .hero-aurora {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
    }
    .hero-aurora::before {
      content: ''; position: absolute;
      width: 900px; height: 600px;
      background: radial-gradient(ellipse, rgba(42,109,244,0.13) 0%, transparent 70%);
      top: -100px; left: 50%; transform: translateX(-50%);
    }
    .hero-aurora::after {
      content: ''; position: absolute;
      width: 500px; height: 400px;
      background: radial-gradient(ellipse, rgba(249,115,22,0.09) 0%, transparent 70%);
      bottom: 0; right: -100px;
    }
    [data-theme="dark"] .hero-aurora::before { background: radial-gradient(ellipse, rgba(42,109,244,0.22) 0%, transparent 70%); }
    [data-theme="dark"] .hero-aurora::after  { background: radial-gradient(ellipse, rgba(249,115,22,0.15) 0%, transparent 70%); }

    .hero-inner {
      position: relative; z-index: 1; text-align: center; max-width: 820px; margin: 0 auto;
    }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--bg-3); border: 1px solid rgba(42,109,244,0.2);
      padding: 6px 18px; border-radius: 50px;
      font-size: 13px; font-weight: 600; color: var(--blue);
      margin-bottom: 30px; letter-spacing: .2px;
    }
    .pill-dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

    h1 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(38px, 5.5vw, 72px);
      font-weight: 800; line-height: 1.07; letter-spacing: -2px;
      margin-bottom: 22px; color: var(--text);
    }
    .grad {
      background: linear-gradient(130deg, var(--blue) 30%, var(--blue-2) 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .grad-orange {
      background: linear-gradient(130deg, var(--orange), var(--orange-2));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hero-sub {
      font-size: 18px; color: var(--text-2); max-width: 540px; margin: 0 auto 44px;
      font-weight: 400; line-height: 1.75;
    }
    .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    .btn-primary {
      background: linear-gradient(130deg, var(--blue), #1753CC);
      color: white; padding: 16px 36px; border-radius: 50px;
      font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700;
      text-decoration: none;
      box-shadow: 0 4px 28px rgba(42,109,244,0.38);
      transition: transform .2s, box-shadow .2s;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(42,109,244,0.55); }
    .btn-outline {
      color: var(--text); border: 2px solid var(--border);
      padding: 14px 34px; border-radius: 50px; text-decoration: none;
      font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 600;
      transition: border-color .2s, background .2s;
    }
    .btn-outline:hover { border-color: var(--blue); background: rgba(42,109,244,0.04); }

    /* wallet card hero mockup */
    .hero-card-area { margin-top: 68px; display: flex; justify-content: center; perspective: 900px; }
    .wallet-card {
      width: 310px; height: 182px;
      background: linear-gradient(135deg, #1A3A8A 0%, #2A6DF4 55%, #5B9BFF 100%);
      border-radius: 22px; padding: 22px 24px;
      box-shadow: 0 28px 64px rgba(26,58,138,0.45), inset 0 0 0 1px rgba(255,255,255,0.14);
      color: white; position: relative; overflow: hidden;
      transform: rotateX(8deg) rotateY(-6deg);
      transition: transform .6s cubic-bezier(.23,1,.32,1);
    }
    .wallet-card:hover { transform: rotateX(0) rotateY(0); }
    .wc-glare { position: absolute; top: -40%; right: -20%; width: 220px; height: 220px; background: radial-gradient(ellipse, rgba(255,255,255,0.10) 0%, transparent 65%); border-radius: 50%; }
    .wc-top { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: 3px; }
    .wc-salon { font-size: 11px; opacity: .55; margin-top: 2px; font-weight: 400; }
    .wc-footer { position: absolute; bottom: 20px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
    .wc-pts .n { font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 800; line-height: 1; }
    .wc-pts .l { font-size: 10px; opacity: .55; letter-spacing: .5px; }
    .stamps { display: flex; gap: 5px; }
    .stamp { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,0.88); }
    .stamp.e { background: rgba(255,255,255,0.18); }
    .wc-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); }

    /* ─── SECTION BASE ─── */
    section { padding: 110px 56px; }
    .sec-tag {
      text-align: center; font-family: 'Sora', sans-serif;
      font-size: 11px; font-weight: 700; letter-spacing: 3.5px;
      text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
    }
    h2 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(28px, 3.6vw, 48px);
      font-weight: 800; text-align: center; letter-spacing: -1.2px;
      line-height: 1.12; margin-bottom: 68px; color: var(--text);
    }

    /* ─── WHO (secteurs) ─── */
    #who { background: var(--bg-2); }
    .sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
    .sector-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 20px; padding: 28px 24px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(42,109,244,0.2); }
    .sector-icon {
      width: 52px; height: 52px;
      background: rgba(42,109,244,0.08);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .sector-icon svg { color: var(--blue); }
    .sector-card h3 { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
    .sector-card p { font-size: 14px; color: var(--text-2); line-height: 1.7; }

    /* ─── SECTION INTRO ─── */
    .section-intro {
      text-align: center; max-width: 560px; margin: -44px auto 60px;
      font-size: 17px; color: var(--text-2); line-height: 1.75;
    }

    /* ─── PRO / CLIENT SECTIONS ─── */
    #pro  { background: var(--bg); }
    #client { background: var(--bg-2); }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px; max-width: 1020px; margin: 0 auto;
    }
    .feat-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 20px; padding: 28px 24px;
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(42,109,244,0.2); }
    .feat-icon {
      width: 48px; height: 48px; border-radius: 14px;
      background: rgba(42,109,244,0.1);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .feat-icon svg { color: var(--blue); }
    .feat-icon.orange { background: rgba(249,115,22,0.1); }
    .feat-icon.orange svg { color: var(--orange); }
    .feat-card h3 {
      font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700;
      margin-bottom: 8px; color: var(--text);
    }
    .feat-card p { font-size: 15px; color: var(--text-2); line-height: 1.7; }

    /* ─── REWARD ICON (SVG) ─── */
    .s-rew-i {
      display: flex; align-items: center; justify-content: center;
      height: 22px; margin: 0 auto 2px;
    }

    /* ─── HOW (timeline) ─── */
    #how { background: var(--bg); }
    .timeline { max-width: 860px; margin: 0 auto; position: relative; }
    .timeline::before {
      content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
      background: linear-gradient(to bottom, transparent 0%, var(--blue-2) 10%, var(--orange) 90%, transparent 100%);
      transform: translateX(-50%);
    }
    .tl-label {
      text-align: center; position: relative; z-index: 2; margin-bottom: 40px;
    }
    .tl-label span {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 20px; border-radius: 50px;
      font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;
    }
    .tl-label.pro span { background: rgba(42,109,244,0.1); color: var(--blue); border: 1.5px solid rgba(42,109,244,0.2); }
    .tl-label.client span { background: rgba(249,115,22,0.1); color: var(--orange); border: 1.5px solid rgba(249,115,22,0.25); }
    .tl-item {
      display: grid; grid-template-columns: 1fr 60px 1fr;
      gap: 0 16px; align-items: center; margin-bottom: 48px;
      opacity: 0; transform: translateY(24px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .tl-item.vis { opacity: 1; transform: translateY(0); }
    .tl-item.left .tl-text  { grid-column: 1; text-align: right; padding-right: 12px; }
    .tl-item.left .tl-node  { grid-column: 2; }
    .tl-item.left .tl-phone { grid-column: 3; }
    .tl-item.right .tl-phone  { grid-column: 1; display: flex; justify-content: flex-end; }
    .tl-item.right .tl-node   { grid-column: 2; }
    .tl-item.right .tl-text   { grid-column: 3; padding-left: 12px; }
    .tl-node {
      width: 60px; height: 60px; border-radius: 50%;
      background: var(--card); border: 2.5px solid var(--blue);
      font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800;
      color: var(--blue); display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2;
      box-shadow: 0 0 0 8px rgba(42,109,244,0.07);
    }
    .tl-item.client-step .tl-node {
      border-color: var(--orange); color: var(--orange);
      box-shadow: 0 0 0 8px rgba(249,115,22,0.07);
    }
    .tl-text h3 {
      font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700;
      margin-bottom: 8px; color: var(--text); line-height: 1.3;
    }
    .tl-text p { font-size: 14px; color: var(--text-2); line-height: 1.75; }

    /* ─── PHONE MOCKUP ─── */
    .phone {
      width: 112px; height: 208px;
      background: #101525; border-radius: 22px;
      border: 3px solid #1e2a3d;
      box-shadow: 0 14px 40px rgba(0,0,0,0.4);
      position: relative; overflow: hidden; flex-shrink: 0;
      display: flex; flex-direction: column; align-items: center;
    }
    .phone::before {
      content: ''; position: absolute; top: 9px; z-index: 10;
      width: 32px; height: 5px; background: #1e2a3d; border-radius: 3px;
    }
    .pscreen {
      width: 100%; height: 100%; padding: 24px 7px 8px;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      overflow: hidden;
    }

    /* screen types */
    .sc-signup  { background: linear-gradient(155deg,#0D1B3E,#1A3A8A); }
    .sc-qr      { background: linear-gradient(155deg,#0D1B3E,#1A3A8A); }
    .sc-scan    { background: linear-gradient(155deg,#0d0d1a,#1a1a2e); }
    .sc-form    { background: linear-gradient(155deg,#EEF2FF,#f0f4ff); }
    .sc-wallet  { background: linear-gradient(155deg,#111,#1c1c1e); }
    .sc-proscan { background: linear-gradient(155deg,#0d0d1a,#1a1a2e); }
    .sc-reward  { background: linear-gradient(155deg,#0D1B3E,#1A3A8A); }

    /* screen elements */
    .s-ttl { font-family:'Sora',sans-serif; font-size:7px; font-weight:800; color:white; text-align:center; letter-spacing:.5px; }
    .s-ttl.dark { color:#1e3a8a; }
    .s-inp { width:88%; height:10px; background:rgba(255,255,255,0.12); border-radius:3px; }
    .s-inp.d  { background:rgba(42,109,244,0.15); }
    .s-btn { width:78%; height:14px; border-radius:4px; background:linear-gradient(90deg,#2A6DF4,#5B9BFF); display:flex;align-items:center;justify-content:center;margin-top:3px; }
    .s-btn-t { font-size:5.5px; color:white; font-weight:800; letter-spacing:.3px; }
    .s-btn.or { background:linear-gradient(90deg,#F97316,#FDBA74); }

    /* QR */
    .s-qr { width:58px; height:58px; background:white; border-radius:5px; padding:5px; display:grid; grid-template-columns:repeat(5,1fr); gap:1.5px; margin:2px 0; }
    .qc { background:#111; border-radius:1px; }
    .qw { background:white; }

    /* wallet mini-card */
    .s-wc { width:96%; height:52px; background:linear-gradient(135deg,#1A3A8A,#2A6DF4,#5B9BFF); border-radius:9px; padding:7px 8px; position:relative; overflow:hidden; }
    .s-wc-name { font-size:5.5px; font-weight:800; color:white; letter-spacing:2px; }
    .s-wc-pts  { font-family:'Sora',sans-serif; font-size:15px; font-weight:800; color:white; line-height:1; margin-top:2px; }
    .s-wc-bar  { position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#F97316,#FDBA74); }

    /* viewfinder */
    .s-finder { width:66px; height:66px; border:1.5px solid rgba(255,255,255,0.2); border-radius:7px; position:relative; margin:4px 0; }
    .s-finder::before,.s-finder::after{content:'';position:absolute;width:14px;height:14px;}
    .s-finder::before{top:-2px;left:-2px;border-top:3px solid #F97316;border-left:3px solid #F97316;border-radius:4px 0 0 0;}
    .s-finder::after{bottom:-2px;right:-2px;border-bottom:3px solid #F97316;border-right:3px solid #F97316;border-radius:0 0 4px 0;}
    .s-line{position:absolute;top:50%;left:5px;right:5px;height:1.5px;background:#F97316;opacity:.7;animation:scan 1.5s ease-in-out infinite alternate;}
    @keyframes scan{from{top:25%}to{top:75%}}
    .s-hint{font-size:5.5px;color:rgba(255,255,255,.45);text-align:center;}

    /* notif */
    .s-notif { width:96%; background:rgba(255,255,255,0.1); border-radius:5px; padding:4px 6px; display:flex; align-items:center; gap:4px; }
    .s-ndot  { width:6px; height:6px; border-radius:50%; background:#5B9BFF; flex-shrink:0; }
    .s-ntxt  { font-size:5px; color:rgba(255,255,255,.7); line-height:1.4; }

    /* reward */
    .s-rew { width:90%; background:linear-gradient(135deg,#F97316,#FDBA74); border-radius:9px; padding:9px 7px; text-align:center; margin-top:3px; }
    .s-rew-i { font-size:20px; line-height:1; }
    .s-rew-t { font-size:5.5px; font-weight:800; color:white; margin-top:3px; line-height:1.4; }

    /* ─── SOCIAL PROOF ─── */
    #proof { background: var(--bg-2); }
    .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
    .proof-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 20px; padding: 28px; position: relative;
      transition: transform .25s, box-shadow .25s;
    }
    .proof-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .proof-stars { color: var(--orange); font-size: 16px; margin-bottom: 14px; letter-spacing: 2px; }
    .proof-text { font-size: 15px; color: var(--text-2); line-height: 1.75; margin-bottom: 18px; font-style: italic; }
    .proof-author { display: flex; align-items: center; gap: 12px; }
    .proof-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800; color: white; flex-shrink: 0;
    }
    .proof-name { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); }
    .proof-role { font-size: 12px; color: var(--text-3); }

    /* ─── CONTACT ─── */
    #contact { background: var(--bg); }
    .contact-wrap { max-width: 640px; margin: 0 auto; }
    .form-group { margin-bottom: 20px; }
    label { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
    label sup { color: var(--orange); }
    input, select, textarea {
      width: 100%; padding: 14px 18px;
      background: var(--bg-2); border: 1.5px solid var(--border);
      border-radius: 12px; color: var(--text);
      font-family: 'DM Sans', sans-serif; font-size: 16px;
      transition: border-color .2s, background .2s;
      outline: none; -webkit-appearance: none; appearance: none;
    }
    input:focus, select:focus, textarea:focus { border-color: var(--blue); background: var(--bg); }
    input::placeholder, textarea::placeholder { color: var(--text-3); }
    select { cursor: pointer; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    textarea { height: 110px; resize: vertical; }
    .form-submit { text-align: center; margin-top: 28px; }
    .form-submit button {
      background: linear-gradient(130deg, var(--blue), #1753CC);
      color: white; border: none; padding: 17px 48px;
      border-radius: 50px; font-family: 'Sora', sans-serif;
      font-size: 17px; font-weight: 700; cursor: pointer;
      box-shadow: 0 4px 24px rgba(42,109,244,0.35);
      transition: transform .2s, box-shadow .2s;
    }
    .form-submit button:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(42,109,244,0.5); }
    .form-note { font-size: 13px; color: var(--text-3); margin-top: 12px; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--bg-2); border-top: 1px solid var(--border);
      padding: 36px 56px;
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
    }
    .footer-brand { display: flex; align-items: center; gap: 8px; }
    .footer-brand img { width: 28px; height: 28px; }
    .footer-brand span {
      font-family: 'Sora', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: 2px;
      background: linear-gradient(130deg, var(--blue), var(--blue-2));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .footer-text { font-size: 13px; color: var(--text-3); }

    /* ─── ACCESSIBILITY ─── */
    *:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }
    @media (max-width: 768px) {
      nav { padding: 0 20px; }
      nav .nav-links { display: none; }
      section { padding: 80px 20px; }
      .sectors-grid { grid-template-columns: 1fr; }
      .proof-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      #hero { padding: 110px 20px 60px; }
      footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
      .timeline::before { display: none; }
      .tl-item { grid-template-columns: 1fr; text-align: left !important; gap: 12px; }
      .tl-item.left .tl-text,.tl-item.left .tl-phone,.tl-item.left .tl-node,
      .tl-item.right .tl-text,.tl-item.right .tl-phone,.tl-item.right .tl-node
      { grid-column: 1; text-align: left !important; justify-content: flex-start; padding: 0; }
      .tl-node {
        width: 48px !important; height: 48px !important; font-size: 17px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        text-align: center !important;
        grid-column: 1 !important;
        border-radius: 50% !important;
      }
    }