* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; overflow-x: hidden; } /* Ultra Modern Noscript Container */ .noscript-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); min-height: 100vh; padding: 2rem 1rem; position: relative; overflow: hidden; } .noscript-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .content-wrapper { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 32px; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1); margin: 0 auto; max-width: 1400px; padding: 4rem 3rem; position: relative; overflow: hidden; } .content-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%); background-size: 300% 100%; animation: gradient-flow 4s ease infinite; } @keyframes gradient-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } /* Hero Section Ultra Modern */ } .hero-section { text-align: center; margin-bottom: 5rem; position: relative; } .hero-icon { width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2rem; box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.1); position: relative; transform: rotate(-2deg); transition: transform 0.3s ease; } .hero-icon:hover { transform: rotate(0deg) scale(1.05); } .hero-icon svg { width: 48px; height: 48px; color: white; stroke-width: 2; } .hero-title { font-size: 4rem; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; line-height: 1; letter-spacing: -0.02em; } .hero-subtitle { font-size: 1.4rem; color: #64748b; font-weight: 500; max-width: 700px; margin: 0 auto 3rem; line-height: 1.5; } /* Feature Grid Ultra Modern */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2.5rem; margin-bottom: 4rem; } .feature-card-modern { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 24px; padding: 2.5rem; border: 2px solid transparent; background-clip: padding-box; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(148, 163, 184, 0.1); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feature-card-modern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea, #764ba2, #f093fb); transform: scaleX(0); transition: transform 0.3s ease; } .feature-card-modern:hover::before { transform: scaleX(1); } .feature-card-modern:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.2); } .flag-badge { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.75rem 1.25rem; border-radius: 50px; font-weight: 600; font-size: 0.875rem; margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .feature-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; color: #1e293b; line-height: 1.3; } .feature-description { color: #64748b; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6; } .feature-list-modern { display: grid; gap: 1.25rem; } .feature-item-modern { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; background: rgba(102, 126, 234, 0.03); border-radius: 16px; border-left: 4px solid; transition: all 0.2s ease; } .feature-item-modern:hover { background: rgba(102, 126, 234, 0.08); transform: translateX(4px); } .feature-item-modern:nth-child(1) { border-left-color: #10b981; } .feature-item-modern:nth-child(2) { border-left-color: #8b5cf6; } .feature-item-modern:nth-child(3) { border-left-color: #3b82f6; } .feature-item-modern:nth-child(4) { border-left-color: #f59e0b; } .feature-item-modern:nth-child(5) { border-left-color: #ef4444; } .feature-icon-modern { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .feature-icon-modern svg { width: 24px; height: 24px; stroke-width: 2.5; } .feature-icon-modern:nth-child(1) { background: linear-gradient(135deg, #10b981, #059669); } .feature-icon-modern:nth-child(2) { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .feature-icon-modern:nth-child(3) { background: linear-gradient(135deg, #3b82f6, #2563eb); } .feature-icon-modern:nth-child(4) { background: linear-gradient(135deg, #f59e0b, #d97706); } .feature-icon-modern:nth-child(5) { background: linear-gradient(135deg, #ef4444, #dc2626); } .feature-text-content h4 { font-weight: 600; color: #1e293b; margin-bottom: 0.25rem; font-size: 1.1rem; } .feature-text-content p { font-size: 0.9rem; color: #64748b; line-height: 1.4; } /* Steps Section Ultra Modern */ .steps-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 24px; padding: 4rem 3rem; color: white; margin: 4rem 0; position: relative; overflow: hidden; } .steps-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); pointer-events: none; animation: rotate 20s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .steps-title { text-align: center; font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; position: relative; z-index: 1; } .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; position: relative; z-index: 1; } .step-item { text-align: center; position: relative; } .step-number { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2rem; margin: 0 auto 1.5rem; backdrop-filter: blur(10px); border: 3px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .step-title { font-weight: 600; margin-bottom: 0.75rem; font-size: 1.2rem; } .step-description { opacity: 0.9; font-size: 1rem; line-height: 1.5; } /* CTA Section Ultra Modern */ .cta-section { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 24px; padding: 4rem 3rem; text-align: center; color: white; margin: 4rem 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%); } .cta-icon { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.3); position: relative; z-index: 1; } .cta-icon svg { width: 36px; height: 36px; color: white; stroke-width: 2; } .cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; position: relative; z-index: 1; } .cta-subtitle { font-size: 1.2rem; margin-bottom: 3rem; opacity: 0.95; position: relative; z-index: 1; max-width: 600px; margin-left: auto; margin-right: auto; } .browser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; position: relative; z-index: 1; } .browser-item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border-radius: 20px; padding: 2rem 1.5rem; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .browser-item:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-4px); } .browser-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .browser-icon svg { width: 24px; height: 24px; color: white; stroke-width: 2; } .browser-name { font-weight: 600; margin-bottom: 0.75rem; font-size: 1.1rem; } .browser-instructions { font-size: 0.9rem; opacity: 0.9; line-height: 1.4; } /* Footer Ultra Modern */ .footer-modern { text-align: center; padding: 3rem 0 2rem; border-top: 2px solid rgba(148, 163, 184, 0.1); margin-top: 4rem; } .footer-logo { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .footer-logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 1.5rem; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3); } .footer-brand { font-size: 1.5rem; font-weight: 700; color: #1e293b; } .footer-copyright { color: #64748b; margin-bottom: 2.5rem; font-size: 1rem; } .keywords-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; max-width: 900px; margin: 0 auto; } .keyword-card { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 16px; padding: 2rem; border-left: 6px solid #667eea; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } .keyword-title { font-weight: 600; color: #667eea; margin-bottom: 1rem; font-size: 1rem; } .keyword-list { font-size: 0.9rem; color: #64748b; line-height: 1.6; } /* Dark mode support */ @media (prefers-color-scheme: dark) { .content-wrapper { background: rgba(15, 23, 42, 0.95); } .hero-subtitle { color: #94a3b8; } .feature-card-modern { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #e2e8f0; } .feature-title { color: #e2e8f0; } .feature-text-content h4 { color: #e2e8f0; } .keyword-card { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #e2e8f0; } .footer-brand { color: #e2e8f0; } .footer-copyright { color: #94a3b8; } .keyword-list { color: #94a3b8; } } /* Mobile responsive */ @media (max-width: 768px) { .noscript-container { padding: 1rem; } .content-wrapper { padding: 2rem 1.5rem; border-radius: 24px; } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.1rem; } .feature-grid { grid-template-columns: 1fr; gap: 2rem; } .steps-section, .cta-section { padding: 2.5rem 1.5rem; border-radius: 20px; } .cta-title { font-size: 2rem; } .browser-grid { grid-template-columns: 1fr; gap: 1.5rem; } .keywords-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-icon { width: 80px; height: 80px; } .hero-icon svg { width: 36px; height: 36px; } .hero-title { font-size: 2rem; } .feature-card-modern { padding: 2rem 1.5rem; } }

SPLITOK

The most elegant way to split restaurant bills.
Free • Fast • Beautiful

🇬🇧 English

Split Bills in 30 Seconds

The free and elegant tool to calculate and split your restaurant bills with friends. No more calculator struggles!

Automatic Calculation

Enter your bill, we do the math instantly

Fair Sharing

Equal or custom split options

Mobile First

Perfect for restaurant use

No Registration

Start immediately, no account required

Privacy First

Your data stays on your device

🇫🇷 Français

Partagez en 30 Secondes

L'outil gratuit et élégant pour calculer et partager vos additions entre amis. Fini les prises de tête !

Calcul Automatique

Saisissez votre addition, on fait le calcul

Partage Équitable

Répartition égale ou personnalisée

Mobile d'Abord

Parfait pour une utilisation au restaurant

Sans Inscription

Commencez immédiatement, aucun compte requis

Vie Privée Respectée

Vos données restent sur votre appareil

How it Works | Comment ça marche

Enter Bill | Saisir

Add your total amount and expenses
Ajoutez votre montant total et dépenses

Add Friends | Amis

List everyone who participated
Listez tous les participants

Get Results | Résultats

Automatic calculation per person
Calcul automatique par personne

Share | Partager

Send breakdown to everyone
Envoyez le détail à tous

Enable JavaScript to Start

Activate JavaScript in your browser to use SPLITOK
Activez JavaScript pour utiliser SPLITOK

Chrome / Edge

Settings → Privacy and security → Site settings → JavaScript

Firefox

about:config → javascript.enabled → set to true

Safari

Preferences → Security → Enable JavaScript