*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --primary:    hsl(270, 72%, 58%);
      --primary-lt: hsl(270, 72%, 96%);
      --primary-dk: hsl(270, 72%, 46%);
      --secondary:  hsl(300, 55%, 68%);
      --accent:     hsl(280, 60%, 80%);
      --bg:         hsl(270, 30%, 97%);
      --fg:         hsl(270, 20%, 14%);
      --muted:      hsl(270, 12%, 52%);
      --border:     hsl(270, 20%, 88%);
      --card:       #ffffff;
      --radius:     14px;
      --nav-h:      68px;
      --font-sans:  'Outfit', sans-serif;
      --font-serif: 'Playfair Display', serif;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); line-height: 1.6; overflow-x: hidden; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: all .2s; }
    .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 24px hsl(270 72% 58% / .32); }
    .btn-primary:hover { background: var(--primary-dk); transform: translateY(-1px); }
    .btn-outline { background: transparent; color: var(--fg); border: 2px solid var(--border); }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

    .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: hsl(270 72% 58% / .10); color: var(--primary); font-size: 13px; font-weight: 600; border: 1px solid hsl(270 72% 58% / .20); }
    .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); display: inline-block; animation: pulse 1.8s infinite; }
    @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.5); } }

    /* NAV */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: hsl(270 30% 97% / .85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
    .nav .container { width: 100%; display: flex; align-items: center; }
    .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-size: 22px; font-weight: 700; flex-shrink: 0; }
    .nav-logo .icon { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 4px 14px hsl(270 72% 58% / .35); }

    .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0 auto; }
    .nav-links a { font-size: 14px; font-weight: 500; color: hsl(270 20% 14% / .60); transition: color .2s; }
    .nav-links a:hover { color: var(--primary); }

    .nav-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

    .nav-icon-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: hsl(270 20% 14% / .60); font-size: 15px; transition: background .2s, color .2s; }
    .nav-icon-btn:hover { background: hsl(270 72% 58% / .10); color: var(--primary); }
    .nav-badge { position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }

    /* Language dropdown */
    .lang-wrap { position: relative; }
    .lang-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: hsl(270 20% 14% / .60); font-size: 13px; font-weight: 500; transition: background .2s, color .2s; }
    .lang-btn:hover, .lang-wrap:focus-within .lang-btn { background: hsl(270 72% 58% / .10); color: var(--primary); }
    .lang-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px hsl(270 20% 14% / .12); min-width: 170px; overflow: hidden; z-index: 200; }
    .lang-wrap:hover .lang-dropdown, .lang-wrap:focus-within .lang-dropdown { display: block; }
    .lang-dropdown button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 14px; color: var(--fg); transition: background .15s; }
    .lang-dropdown button:hover { background: var(--primary-lt); color: var(--primary); }
    .lang-dropdown button.active { color: var(--primary); font-weight: 600; }

    /* Avatar */
    .nav-avatar { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 2px solid hsl(270 72% 58% / .25); background: hsl(270 72% 58% / .07); font-size: 13px; font-weight: 500; color: hsl(270 20% 14% / .75); transition: border-color .2s, background .2s; }
    .nav-avatar:hover { border-color: var(--primary); background: hsl(270 72% 58% / .12); }
    .nav-avatar .avi { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }

    /* Hamburger */
    .ham-btn { display: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; font-size: 17px; color: hsl(270 20% 14% / .70); transition: background .2s, color .2s; }
    .ham-btn:hover { background: hsl(270 72% 58% / .10); color: var(--primary); }

    /* Mobile drawer */
    .mobile-menu { display: none; flex-direction: column; gap: 3px; padding: 14px 18px 20px; background: hsl(270 30% 97% / .97); border-top: 1px solid var(--border); position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { padding: 12px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: hsl(270 20% 14% / .78); transition: background .15s, color .15s; }
    .mobile-menu a:hover { background: hsl(270 72% 58% / .09); color: var(--primary); }
    .mobile-menu hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
    .mobile-menu .btn-primary { justify-content: center; margin-top: 4px; }

    /* HERO */
    .hero { min-height: 100vh; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 80px; display: flex; align-items: center; background: radial-gradient(ellipse at 70% 10%, hsl(270 72% 58% / .13) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, hsl(280 60% 80% / .18) 0%, transparent 50%), var(--bg); }
    .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
    .hero-text { display: flex; flex-direction: column; gap: 28px; }
    .hero h1 { font-family: var(--font-serif); font-size: clamp(44px, 6vw, 80px); line-height: 1.06; font-weight: 700; }
    .hero h1 span { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 60%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero p { font-size: 18px; color: var(--muted); max-width: 460px; line-height: 1.7; }
    .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
    .hero-social { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
    .avatars { display: flex; }
    .avatars img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -8px; object-fit: cover; }
    .avatars img:first-child { margin-left: 0; }
    .hero-image { border-radius: 28px; overflow: hidden; box-shadow: 0 32px 80px hsl(270 72% 58% / .18), 0 8px 24px hsl(270 20% 14% / .10); }
    .hero-image img { width: 100%; height: 520px; object-fit: cover; }

    /* STATS */
    .stats { padding: 36px 0; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .stats .container { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
    .stat { text-align: center; }
    .stat strong { display: block; font-size: 32px; font-weight: 800; color: var(--primary); }
    .stat span { font-size: 13px; color: var(--muted); font-weight: 500; }

    /* SECTION HEADER */
    .section-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
    .section-header h2 { font-family: var(--font-serif); font-size: clamp(30px, 4vw, 48px); font-weight: 700; line-height: 1.15; margin-top: 14px; }
    .section-header p { font-size: 16px; color: var(--muted); margin-top: 14px; line-height: 1.7; }

    /* FEATURES */
    .features { padding: 96px 0; }
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; transition: transform .25s, box-shadow .25s; }
    .feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px hsl(270 72% 58% / .10); }
    .feature-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--primary-lt); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px; }
    .feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 9px; }
    .feature-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

    /* HOW IT WORKS */
    .how { padding: 96px 0; background: var(--card); }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .step { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .step-num { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; box-shadow: 0 10px 24px hsl(270 72% 58% / .30); }
    .step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
    .step p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 240px; }

    /* HIGHLIGHT */
    .highlight { padding: 96px 0; }
    .highlight-alt { background: var(--card); }
    .highlight .container { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .highlight-alt .container { direction: rtl; }
    .highlight-alt .container > * { direction: ltr; }
    .highlight-img { border-radius: 22px; overflow: hidden; box-shadow: 0 24px 64px hsl(270 20% 14% / .12); }
    .highlight-img img { width: 100%; height: 420px; object-fit: cover; }
    .highlight-text { display: flex; flex-direction: column; gap: 20px; }
    .highlight-text h2 { font-family: var(--font-serif); font-size: clamp(26px, 3.5vw, 42px); font-weight: 700; line-height: 1.2; }
    .highlight-text p { font-size: 15px; color: var(--muted); line-height: 1.7; }
    .check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .check-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
    .check-list li i { color: var(--primary); font-size: 15px; }

    /* SAFETY */
    .safety { padding: 96px 0; }
    .safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .safety-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
    .safety-card i { font-size: 24px; color: var(--primary); margin-bottom: 14px; display: block; }
    .safety-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .safety-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* TESTIMONIALS */
    .testimonials { padding: 96px 0; background: var(--card); }
    .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .testi-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
    .stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
    .testi-card p { font-size: 14px; color: var(--fg); line-height: 1.7; font-style: italic; }
    .testi-author { display: flex; align-items: center; gap: 12px; }
    .testi-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
    .testi-author strong { display: block; font-size: 14px; font-weight: 700; }
    .testi-author span { font-size: 12px; color: var(--muted); }

    /* CTA */
    .cta-section { padding: 100px 24px; text-align: center; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); position: relative; overflow: hidden; }
    .cta-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='10' fill='white' fill-opacity='.05'/%3E%3C/svg%3E"); }
    .cta-section > * { position: relative; }
    .cta-section h2 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 52px); font-weight: 700; color: #fff; margin-bottom: 18px; line-height: 1.2; }
    .cta-section p { font-size: 17px; color: hsl(0 0% 100% / .80); max-width: 500px; margin: 0 auto 40px; }
    .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .btn-white { background: #fff; color: var(--primary); padding: 14px 34px; border-radius: 999px; font-weight: 700; font-size: 15px; box-shadow: 0 8px 24px hsl(0 0% 0% / .15); transition: transform .2s, box-shadow .2s; display: inline-flex; align-items: center; gap: 8px; }
    .btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 32px hsl(0 0% 0% / .20); }
    .btn-ghost-white { background: transparent; color: #fff; border: 2px solid hsl(0 0% 100% / .50); padding: 14px 34px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: border-color .2s, background .2s; display: inline-flex; align-items: center; gap: 8px; }
    .btn-ghost-white:hover { border-color: #fff; background: hsl(0 0% 100% / .10); }

    /* FOOTER */
    footer { background: hsl(270, 25%, 10%); color: hsl(270, 10%, 65%); padding: 72px 0 32px; }
    .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
    .footer-brand .nav-logo { color: #fff; margin-bottom: 16px; }
    .footer-brand p { font-size: 14px; line-height: 1.7; color: hsl(270 10% 55%); max-width: 280px; }
    .footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .06em; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul li a { font-size: 13px; color: hsl(270 10% 55%); transition: color .2s; }
    .footer-col ul li a:hover { color: var(--secondary); }
    .footer-bottom { border-top: 1px solid hsl(270 10% 18%); padding-top: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .footer-bottom p { font-size: 13px; color: hsl(270 10% 40%); }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-avatar span, .nav-avatar i:last-child { display: none; }
      .nav-avatar { padding: 4px; }
      .ham-btn { display: flex; }

      .hero .container { grid-template-columns: 1fr; gap: 40px; }
      .hero-image { order: -1; }
      .hero-image img { height: 300px; }
      .hero h1 { font-size: 42px; }
      .hero-cta { flex-direction: column; }
      .hero-cta .btn { justify-content: center; }

      .features-grid { grid-template-columns: 1fr 1fr; }
      .steps { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
      .highlight .container, .highlight-alt .container { grid-template-columns: 1fr; gap: 36px; direction: ltr; }
      .safety-grid { grid-template-columns: 1fr 1fr; }
      .testi-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .stats .container { gap: 28px; }
    }
    @media (max-width: 560px) {
      .features-grid, .safety-grid, .footer-top { grid-template-columns: 1fr; }
      .cta-btns { flex-direction: column; align-items: center; }
    }