@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');:root{ --french-blue:#0055A4; --french-white:#FFFFFF; --french-red:#EF4135; --dark-blue:#003d7a; --light-blue:#eff6ff; --light-red:#fff1f0; --grey-50:#fafafa; --grey-100:#f4f4f5; --grey-200:#e4e4e7; --grey-300:#d4d4d8; --grey-400:#a1a1aa; --grey-500:#71717a; --grey-600:#52525b; --grey-700:#3f3f46; --grey-800:#27272a; --grey-900:#18181b; --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1);}
*{ margin:0; padding:0; box-sizing:border-box;}
html{ scroll-behavior:smooth;}
body{ font-family:'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight:400; line-height:1.7; color:var(--grey-800); background:var(--grey-50); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.container{ max-width:1200px; margin:0 auto; padding:0 24px;}
/* Header & Navigation */.header{ background:rgba(255, 255, 255, 0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0, 85, 164, 0.1); position:sticky; top:0; z-index:1000; animation:slideDown 0.6s ease-out;}
@keyframes slideDown{ from{ transform:translateY(-100%); opacity:0;}
 to{ transform:translateY(0); opacity:1;}
}
.nav .container{ display:flex; justify-content:space-between; align-items:center; padding:24px;}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; font-size:22px; letter-spacing:-0.5px; color:var(--grey-900); transition:transform 0.3s ease;}
.logo:hover{ transform:translateX(4px);}
.logo-icon{ font-size:28px; display:flex; align-items:center; justify-content:center;}
.logo-text .to{ color:var(--french-red); font-weight:400; margin:0 2px;}
.nav-menu{ display:flex; list-style:none; gap:8px; align-items:center;}
.nav-menu a{ text-decoration:none; color:var(--grey-600); font-weight:500; font-size:14px; letter-spacing:-0.2px; padding:10px 20px; border-radius:8px; transition:all 0.2s ease;}
.nav-menu a:hover{ color:var(--french-blue); background:var(--light-blue);}
/* Hero Section */.hero{ background:linear-gradient(135deg, #0055A4 0%, #003d7a 50%, #EF4135 100%); color:var(--french-white); padding:140px 0 160px; text-align:center; position:relative; overflow:hidden;}
.hero::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% 80%, rgba(239, 65, 53, 0.15) 0%, transparent 50%); animation:gradient-shift 15s ease infinite;}
@keyframes gradient-shift{ 0%, 100%{opacity:1}
 50%{opacity:0.7}
}
.hero-title{ font-weight:800; font-size:72px; line-height:1.1; letter-spacing:-2px; margin-bottom:28px; position:relative; z-index:1; animation:fadeInUp 0.8s ease-out 0.2s both;}
.hero-title .highlight{ background:linear-gradient(120deg, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800;}
.hero-subtitle{ font-size:20px; font-weight:400; letter-spacing:-0.3px; opacity:0.9; position:relative; z-index:1; max-width:600px; margin:0 auto; animation:fadeInUp 0.8s ease-out 0.4s both;}
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px);}
 to{ opacity:1; transform:translateY(0);}
}
/* Converter Section */.converter{ padding:80px 0; margin-top:-80px; position:relative; z-index:10;}
.converter-card{ background:var(--french-white); border-radius:32px; box-shadow:0 20px 60px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02); padding:64px; animation:fadeIn 0.8s ease-out 0.6s both;}
/* Mode Switcher */.converter-mode-switch{ display:flex; gap:12px; justify-content:center; margin-bottom:48px; background:var(--grey-50); padding:8px; border-radius:16px; width:fit-content; margin-left:auto; margin-right:auto;}
.mode-btn{ background:transparent; border:none; padding:14px 28px; font-size:15px; font-weight:600; letter-spacing:-0.2px; border-radius:12px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:inline-flex; align-items:center; gap:8px; color:var(--grey-600); font-family:'Sora', sans-serif;}
.mode-btn.active{ background:linear-gradient(135deg, var(--french-blue), var(--dark-blue)); color:var(--french-white); box-shadow:0 4px 12px rgba(0, 85, 164, 0.2);}
.mode-btn:hover:not(.active){ background:var(--grey-100); color:var(--grey-900);}
.mode-btn svg{ width:18px; height:18px;}
/* Keyword Tags */.keyword-tags{ margin-top:48px; padding:32px; background:linear-gradient(135deg, rgba(0, 85, 164, 0.03) 0%, rgba(239, 65, 53, 0.03) 100%); border-radius:24px; border:1px solid rgba(0, 85, 164, 0.1);}
.keyword-tags h3{ font-size:16px; font-weight:700; letter-spacing:-0.3px; color:var(--grey-900); margin-bottom:20px; text-align:center;}
.tags-container{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.keyword-tag{ display:inline-flex; align-items:center; padding:12px 24px; background:var(--french-white); border:1px solid var(--grey-200); border-radius:12px; text-decoration:none; color:var(--grey-700); font-size:14px; font-weight:500; letter-spacing:-0.2px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.keyword-tag:hover{ background:var(--french-blue); color:var(--french-white); border-color:var(--french-blue); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0, 85, 164, 0.2);}
/* SEO Content Section */.content-seo{ padding:100px 0; background:var(--grey-50);}
.seo-content-card{ max-width:900px; margin:0 auto; background:var(--french-white); padding:56px; border-radius:32px; box-shadow:var(--shadow-xl); border:1px solid rgba(0, 0, 0, 0.02);}
.seo-content-card h2{ font-size:36px; font-weight:800; letter-spacing:-1px; color:var(--grey-900); margin-bottom:24px;}
.seo-content-card h3{ font-size:24px; font-weight:700; letter-spacing:-0.5px; color:var(--grey-900); margin-top:36px; margin-bottom:16px;}
.seo-content-card p{ line-height:1.8; font-size:15px; letter-spacing:-0.2px; color:var(--grey-600); margin-bottom:20px;}
.seo-content-card ul{ margin:20px 0 20px 24px;}
.seo-content-card li{ line-height:1.8; font-size:15px; letter-spacing:-0.2px; color:var(--grey-600); margin-bottom:12px;}
.cta-box{ margin-top:40px; padding:32px; background:linear-gradient(135deg, rgba(0, 85, 164, 0.05) 0%, rgba(239, 65, 53, 0.05) 100%); border-left:4px solid var(--french-blue); border-radius:16px;}
.cta-box h3{ font-size:22px; font-weight:700; letter-spacing:-0.4px; color:var(--grey-900); margin-top:0; margin-bottom:12px;}
.cta-box p{ margin-bottom:0; font-size:15px;}
/* PDF Icon Styling */.pdf-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--light-red); border-radius:12px; color:var(--french-red);}
.pdf-icon svg{ width:32px; height:32px;}
/* Breadcrumbs */.breadcrumbs{ padding:24px 0; background:var(--grey-50);}
.breadcrumb-list{ display:flex; align-items:center; gap:8px; list-style:none; flex-wrap:wrap;}
.breadcrumb-list li{ display:flex; align-items:center; gap:8px; font-size:14px; letter-spacing:-0.2px;}
.breadcrumb-list a{ color:var(--grey-600); text-decoration:none; transition:color 0.2s ease;}
.breadcrumb-list a:hover{ color:var(--french-blue);}
.breadcrumb-list li:not(:last-child)::after{ content:'›'; color:var(--grey-400); margin-left:8px;}
.breadcrumb-list li:last-child{ color:var(--grey-900); font-weight:600;}
@keyframes fadeIn{ from{opacity:0}
 to{opacity:1}
}
.upload-zone{ text-align:center; padding:80px 40px; border:2px dashed var(--grey-300); border-radius:24px; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor:pointer; background:linear-gradient(135deg, rgba(0, 85, 164, 0.02) 0%, rgba(239, 65, 53, 0.02) 100%);}
.upload-zone.dragover{ border-color:var(--french-blue); background:var(--light-blue); transform:scale(1.01); box-shadow:0 8px 24px rgba(0, 85, 164, 0.15);}
.upload-icon{ display:inline-flex; align-items:center; justify-content:center; width:100px; height:100px; background:linear-gradient(135deg, var(--french-blue), var(--french-red)); border-radius:24px; margin-bottom:32px; animation:float 3s ease-in-out infinite;}
@keyframes float{ 0%, 100%{transform:translateY(0)}
 50%{transform:translateY(-8px)}
}
.upload-icon svg{ color:var(--french-white);}
.upload-zone h3{ font-weight:700; font-size:26px; letter-spacing:-0.5px; color:var(--grey-900); margin-bottom:12px;}
.upload-zone p{ color:var(--grey-500); font-size:15px; letter-spacing:-0.2px; margin-bottom:36px;}
.btn-primary{ background:linear-gradient(135deg, var(--french-blue), var(--dark-blue)); color:var(--french-white); border:none; padding:16px 40px; font-size:15px; font-weight:600; letter-spacing:-0.2px; border-radius:12px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:inline-flex; align-items:center; gap:10px; box-shadow:0 4px 16px rgba(0, 85, 164, 0.25); font-family:'Sora', sans-serif;}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0, 85, 164, 0.35);}
.btn-primary:active{ transform:translateY(0);}
.btn-secondary{ background:var(--grey-100); color:var(--grey-700); border:none; padding:16px 40px; font-size:15px; font-weight:600; letter-spacing:-0.2px; border-radius:12px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family:'Sora', sans-serif;}
.btn-secondary:hover{ background:var(--grey-200); transform:translateY(-2px);}
.btn-download{ background:linear-gradient(135deg, var(--french-red), #d63329); color:var(--french-white); border:none; padding:18px 48px; font-size:16px; font-weight:700; letter-spacing:-0.3px; border-radius:12px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display:inline-flex; align-items:center; gap:10px; box-shadow:0 4px 16px rgba(239, 65, 53, 0.3); margin-bottom:16px; font-family:'Sora', sans-serif;}
.btn-download:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(239, 65, 53, 0.4);}
/* Preview Zone */.preview-zone{ animation:fadeIn 0.5s ease-out;}
.preview-zone h3{ font-size:22px; font-weight:700; letter-spacing:-0.5px; margin-bottom:24px; color:var(--grey-900);}
.file-list{ display:grid; gap:12px; margin-bottom:40px;}
.file-item{ display:flex; align-items:center; gap:16px; padding:16px; background:var(--grey-50); border-radius:16px; border:1px solid var(--grey-200); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation:slideIn 0.3s ease-out;}
@keyframes slideIn{ from{ opacity:0; transform:translateX(-20px);}
 to{ opacity:1; transform:translateX(0);}
}
.file-item:hover{ border-color:var(--french-blue); background:var(--light-blue); transform:translateX(4px);}
.file-item img{ width:56px; height:56px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow-sm);}
.file-info{ flex:1;}
.file-name{ font-weight:600; font-size:14px; letter-spacing:-0.2px; color:var(--grey-900); margin-bottom:4px;}
.file-size{ font-size:13px; letter-spacing:-0.1px; color:var(--grey-500);}
.file-remove{ background:none; border:none; color:var(--grey-400); cursor:pointer; font-size:28px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:all 0.2s ease;}
.file-remove:hover{ background:var(--light-red); color:var(--french-red);}
.converter-actions{ display:flex; gap:12px; justify-content:center;}
/* Loading Zone */.loading-zone{ text-align:center; padding:80px 40px; animation:fadeIn 0.3s ease-out;}
.spinner{ width:64px; height:64px; border:4px solid var(--grey-200); border-top-color:var(--french-blue); border-right-color:var(--french-red); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 32px;}
@keyframes spin{ to{transform:rotate(360deg)}
}
.loading-zone p{ font-size:16px; letter-spacing:-0.2px; color:var(--grey-600); font-weight:500;}
/* Success Zone */.success-zone{ text-align:center; padding:80px 40px; animation:fadeIn 0.5s ease-out;}
.success-icon{ display:inline-flex; align-items:center; justify-content:center; width:100px; height:100px; background:linear-gradient(135deg, #10b981, #059669); color:var(--french-white); font-size:56px; border-radius:24px; margin-bottom:32px; animation:scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);}
@keyframes scaleIn{ from{ transform:scale(0) rotate(-180deg); opacity:0;}
 to{ transform:scale(1) rotate(0); opacity:1;}
}
.success-zone h3{ font-size:28px; font-weight:700; letter-spacing:-0.5px; color:var(--grey-900); margin-bottom:32px;}
/* Features Section */.features{ padding:100px 0; background:var(--french-white);}
.features h2{ font-size:48px; font-weight:800; letter-spacing:-1.5px; text-align:center; margin-bottom:64px; color:var(--grey-900);}
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px;}
.feature-card{ background:var(--grey-50); padding:36px; border-radius:24px; text-align:center; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border:1px solid transparent;}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-xl); border-color:rgba(0, 85, 164, 0.1); background:var(--french-white);}
.feature-icon{ font-size:40px; width:80px; height:80px; display:inline-flex; align-items:center; justify-content:center; border-radius:20px; margin-bottom:24px;}
.feature-icon.blue{ background:var(--light-blue); color:var(--french-blue);}
.feature-icon.white{ background:var(--grey-100); color:var(--grey-700);}
.feature-icon.red{ background:var(--light-red); color:var(--french-red);}
.feature-card h3{ font-size:20px; font-weight:700; letter-spacing:-0.3px; margin-bottom:12px; color:var(--grey-900);}
.feature-card p{ color:var(--grey-600); line-height:1.7; font-size:14px; letter-spacing:-0.2px;}
/* How To Section */.how-to{ padding:100px 0; background:linear-gradient(180deg, var(--grey-50) 0%, var(--french-white) 100%);}
.how-to h2{ font-size:48px; font-weight:800; letter-spacing:-1.5px; text-align:center; margin-bottom:64px; color:var(--grey-900);}
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:40px;}
.step{ text-align:center; position:relative;}
.step-number{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; background:linear-gradient(135deg, var(--french-blue), var(--french-red)); color:var(--french-white); font-size:28px; font-weight:800; border-radius:16px; margin-bottom:24px; box-shadow:0 8px 24px rgba(0, 85, 164, 0.2);}
.step h3{ font-size:20px; font-weight:700; letter-spacing:-0.3px; margin-bottom:12px; color:var(--grey-900);}
.step p{ color:var(--grey-600); line-height:1.7; font-size:14px; letter-spacing:-0.2px;}
/* FAQ Section */.faq{ padding:100px 0; background:var(--french-white);}
.faq h2{ font-size:48px; font-weight:800; letter-spacing:-1.5px; text-align:center; margin-bottom:64px; color:var(--grey-900);}
.faq-list{ max-width:800px; margin:0 auto;}
.faq-item{ background:var(--grey-50); padding:28px 32px; border-radius:20px; margin-bottom:16px; border-left:3px solid var(--french-blue); transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.faq-item:hover{ transform:translateX(8px); box-shadow:var(--shadow-lg); background:var(--french-white);}
.faq-item h3{ font-size:17px; font-weight:700; letter-spacing:-0.3px; margin-bottom:10px; color:var(--grey-900);}
.faq-item p{ color:var(--grey-600); line-height:1.8; font-size:14px; letter-spacing:-0.2px;}
/* Footer */.footer{ background:var(--grey-900); color:var(--grey-300); padding:64px 0 28px;}
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:48px; margin-bottom:48px;}
.footer-section h4{ font-size:18px; font-weight:700; letter-spacing:-0.3px; margin-bottom:20px; color:var(--french-white);}
.footer-section p{ line-height:1.7; font-size:14px; letter-spacing:-0.2px;}
.footer-section ul{ list-style:none;}
.footer-section ul li{ margin-bottom:12px;}
.footer-section a{ color:var(--grey-300); text-decoration:none; font-size:14px; letter-spacing:-0.2px; transition:color 0.2s ease;}
.footer-section a:hover{ color:var(--french-blue);}
.footer-bottom{ border-top:1px solid var(--grey-700); padding-top:24px; text-align:center; color:var(--grey-400); font-size:13px; letter-spacing:-0.1px;}
/* Contact Page */.contact-section{ padding:80px 0; min-height:60vh;}
.contact-section h1{ font-size:48px; font-weight:800; letter-spacing:-1.5px; text-align:center; margin-bottom:48px; color:var(--grey-900);}
.contact-form{ max-width:600px; margin:0 auto; background:var(--french-white); padding:48px; border-radius:32px; box-shadow:var(--shadow-xl); border:1px solid rgba(0, 0, 0, 0.02);}
.form-group{ margin-bottom:24px;}
.form-group label{ display:block; font-weight:600; font-size:14px; letter-spacing:-0.2px; margin-bottom:8px; color:var(--grey-700);}
.form-group input,.form-group textarea{ width:100%; padding:14px 16px; border:1px solid var(--grey-300); border-radius:12px; font-family:'Sora', sans-serif; font-size:14px; letter-spacing:-0.2px; transition:all 0.2s ease; background:var(--grey-50);}
.form-group input:focus,.form-group textarea:focus{ outline:none; border-color:var(--french-blue); background:var(--french-white); box-shadow:0 0 0 3px rgba(0, 85, 164, 0.1);}
.form-group textarea{ resize:vertical; min-height:150px;}
.form-submit{ text-align:center; margin-top:32px;}
/* Legal Pages */.legal-section{ padding:80px 0; min-height:60vh;}
.legal-content{ max-width:900px; margin:0 auto; background:var(--french-white); padding:56px; border-radius:32px; box-shadow:var(--shadow-xl); border:1px solid rgba(0, 0, 0, 0.02);}
.legal-content h1{ font-size:42px; font-weight:800; letter-spacing:-1.2px; margin-bottom:32px; color:var(--grey-900);}
.legal-content h2{ font-size:26px; font-weight:700; letter-spacing:-0.5px; margin-top:40px; margin-bottom:16px; color:var(--grey-900);}
.legal-content p{ line-height:1.8; font-size:15px; letter-spacing:-0.2px; color:var(--grey-600); margin-bottom:16px;}
.legal-content ul{ margin-left:24px; margin-bottom:16px;}
.legal-content li{ line-height:1.8; font-size:15px; letter-spacing:-0.2px; color:var(--grey-600); margin-bottom:8px;}
/* Responsive */@media (max-width:768px){ .nav .container{ padding:20px 24px;}
 .nav-menu{ gap:4px;}
 .nav-menu a{ padding:8px 12px; font-size:13px;}
 .logo{ font-size:20px;}
 .logo-icon{ font-size:24px;}
 .hero{ padding:100px 0 120px;}
 .hero-title{ font-size:48px; letter-spacing:-1.5px;}
 .hero-subtitle{ font-size:17px;}
 .converter-card{ padding:32px 24px; border-radius:24px;}
 .upload-zone{ padding:60px 24px; border-radius:20px;}
 .upload-icon{ width:80px; height:80px; border-radius:20px;}
 .upload-zone h3{ font-size:22px;}
 .features h2, .how-to h2, .faq h2{ font-size:36px; letter-spacing:-1px;}
 .steps, .features-grid{ grid-template-columns:1fr; gap:20px;}
 .feature-card{ padding:28px; border-radius:20px;}
 .feature-icon{ width:64px; height:64px; border-radius:16px;}
 .step-number{ width:56px; height:56px; border-radius:14px; font-size:24px;}
 .legal-content{ padding:32px 24px; border-radius:24px;}
 .legal-content h1{ font-size:32px; letter-spacing:-0.8px;}
 .legal-content h2{ font-size:22px; letter-spacing:-0.4px;}
 .contact-form{ padding:32px 24px; border-radius:24px;}
 .contact-section h1{ font-size:36px; letter-spacing:-1px;}
 .converter-actions{ flex-direction:column;}
 .btn-primary, .btn-secondary, .btn-download{ width:100%; justify-content:center;}
 .success-icon{ width:80px; height:80px; border-radius:20px; font-size:48px;}
 .success-zone h3{ font-size:24px;}
 .footer{ padding:48px 0 24px;}
 .footer-content{ gap:32px;}
}