@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
:root{--navy:#0a1628;--navy-mid:#112240;--navy-light:#1d3461;--accent:#f5a623;--white:#ffffff;--gray-400:#94a3b8;--gray-600:#64748b;--green:#22c55e;--red:#ef4444;--blue:#3b82f6;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--white);min-height:100vh;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
nav{position:sticky;top:0;z-index:100;background:rgba(10,22,40,0.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.07);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.4rem;color:var(--white);letter-spacing:-0.5px;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.logo span.accent{color:var(--accent);}
.logo-badge{background:var(--accent);color:var(--navy);font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;font-family:'DM Sans',sans-serif;}
.nav-pills{display:flex;gap:4px;list-style:none;}
.nav-pills a{text-decoration:none;color:var(--gray-400);font-size:13.5px;font-weight:500;padding:6px 14px;border-radius:8px;transition:all .2s;}
.nav-pills a:hover,.nav-pills a.active{background:rgba(255,255,255,0.08);color:var(--white);}
.nav-cta{background:var(--accent)!important;color:var(--navy)!important;font-weight:600!important;}
.hero{padding:5rem 2rem 3rem;max-width:920px;margin:0 auto;text-align:center;}
.hero-tag{display:inline-block;background:rgba(245,166,35,0.15);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:6px 16px;border-radius:99px;border:1px solid rgba(245,166,35,0.3);margin-bottom:1.5rem;}
.hero h1{font-family:'Syne',sans-serif;font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:1.2rem;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{color:var(--gray-400);font-size:1.05rem;line-height:1.8;max-width:620px;margin:0 auto 2.5rem;}
.hero-exams{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.exam-pill{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:var(--gray-400);font-size:12px;padding:5px 14px;border-radius:99px;}
.section{max-width:1120px;margin:0 auto;padding:0 2rem 4rem;}
.section-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--gray-400);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;}
.section-title::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;}
.tool-card{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.08);border-radius:18px;overflow:hidden;transition:transform .25s,border-color .25s;cursor:pointer;position:relative;}
.tool-card:hover{transform:translateY(-3px);border-color:rgba(245,166,35,0.35);}
.card-accent{height:4px;}
.card-body{padding:1.4rem;}
.tool-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:.9rem;}
.tool-card h3{font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;margin-bottom:.35rem;}
.tool-card p{color:var(--gray-400);font-size:13px;line-height:1.6;margin-bottom:.9rem;}
.card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem;}
.tag{font-size:11px;font-weight:500;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,0.05);color:var(--gray-400);border:1px solid rgba(255,255,255,0.08);}
.card-arrow{position:absolute;top:1.1rem;right:1.1rem;color:var(--gray-400);font-size:18px;opacity:0;transition:opacity .2s,transform .2s;}
.tool-card:hover .card-arrow{opacity:1;transform:translate(2px,-2px);}
.card-btn{display:inline-block;background:var(--accent);color:var(--navy);font-weight:600;font-size:13px;padding:8px 18px;border-radius:8px;transition:opacity .2s;}
.card-btn:hover{opacity:.88;}
/* TOOL PAGE */
.tool-page{max-width:820px;margin:0 auto;padding:2.5rem 2rem 5rem;}
.tool-hero{margin-bottom:2.5rem;}
.tool-hero h1{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.15;letter-spacing:-.8px;margin-bottom:.6rem;}
.tool-hero p{color:var(--gray-400);font-size:.98rem;line-height:1.75;max-width:560px;}
.tool-box{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.09);border-radius:20px;padding:2rem;}
/* DROPZONE */
.dropzone{border:2px dashed rgba(255,255,255,0.14);border-radius:14px;padding:2.5rem 2rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:1.4rem;position:relative;}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:rgba(245,166,35,0.04);}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.dropzone .dz-icon{font-size:2.2rem;margin-bottom:.7rem;}
.dropzone p{color:var(--gray-400);font-size:14px;}
.dropzone strong{color:var(--white);}
/* CONTROLS */
.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.4rem;}
.control-group label{display:block;font-size:11.5px;font-weight:500;color:var(--gray-400);margin-bottom:5px;text-transform:uppercase;letter-spacing:.8px;}
.control-group input[type=number],.control-group select{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--white);border-radius:9px;padding:9px 13px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s;}
.control-group input:focus,.control-group select:focus{border-color:var(--accent);}
.control-group select option{background:var(--navy-mid);}
.slider-group{margin-bottom:1rem;}
.slider-group label{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500;color:var(--gray-400);margin-bottom:5px;text-transform:uppercase;letter-spacing:.8px;}
.slider-group label span{color:var(--white);}
input[type=range]{width:100%;accent-color:var(--accent);}
.preset-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:1.4rem;}
.preset-btn{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--gray-400);font-size:12px;font-weight:500;padding:6px 13px;border-radius:8px;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;}
.preset-btn:hover,.preset-btn.active{background:rgba(245,166,35,0.12);border-color:var(--accent);color:var(--accent);}
/* PREVIEW */
.preview-panel{display:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.4rem;margin-bottom:1.4rem;}
.preview-panel.active{display:block;}
.preview-flex{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap;}
.preview-box{flex:1;min-width:140px;}
.preview-box p{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--gray-400);margin-bottom:7px;}
.preview-box canvas,.preview-box img{max-width:100%;border-radius:8px;border:1px solid rgba(255,255,255,0.08);display:block;max-height:220px;object-fit:contain;background:repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%,transparent 0% 50%) 0 0/12px 12px;}
.preview-meta{font-size:12px;color:var(--gray-400);margin-top:7px;line-height:1.7;}
.preview-meta strong{color:var(--white);}
.size-diff{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;margin-left:4px;}
.size-diff.smaller{background:rgba(34,197,94,0.15);color:#86efac;}
.size-diff.bigger{background:rgba(239,68,68,0.15);color:#fca5a5;}
/* BANNERS */
.info-banner{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:11px;padding:.9rem 1.1rem;margin-bottom:1.4rem;font-size:13px;color:#93c5fd;line-height:1.65;}
.info-banner strong{color:var(--white);}
.warn-banner{background:rgba(245,166,35,0.08);border:1px solid rgba(245,166,35,0.2);border-radius:11px;padding:.9rem 1.1rem;margin-bottom:1.4rem;font-size:13px;color:#fcd34d;line-height:1.65;}
/* BUTTONS */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}
.btn-primary{background:var(--accent);color:var(--navy);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;padding:10px 22px;border-radius:10px;border:none;cursor:pointer;transition:opacity .2s,transform .15s;}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.btn-primary:active{transform:scale(.98);}
.btn-download{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:var(--green);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;padding:10px 22px;border-radius:10px;cursor:pointer;transition:background .2s;display:none;}
.btn-download.visible{display:inline-block;}
.btn-download:hover{background:rgba(34,197,94,0.22);}
/* PROGRESS */
.progress-wrap{background:rgba(255,255,255,0.07);border-radius:99px;height:6px;margin-bottom:1.2rem;overflow:hidden;display:none;}
.progress-wrap.active{display:block;}
.progress-bar{height:100%;background:var(--accent);border-radius:99px;transition:width .3s;}
/* RESULT */
.result-box{display:none;background:rgba(34,197,94,0.07);border:1px solid rgba(34,197,94,0.2);border-radius:11px;padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:13.5px;line-height:1.8;}
/* MERGE */
.merge-list{list-style:none;margin-bottom:1.2rem;}
.merge-item{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:10px 14px;margin-bottom:7px;font-size:13px;}
.merge-item .file-name{color:var(--white);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.merge-item .file-size{color:var(--gray-400);margin-left:10px;white-space:nowrap;}
.merge-item .rm-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:16px;margin-left:10px;padding:0 4px;}
/* BG SWATCHES */
.bg-color-row{display:flex;gap:8px;align-items:center;margin-bottom:1rem;flex-wrap:wrap;}
.bg-swatch{width:28px;height:28px;border-radius:6px;border:2px solid rgba(255,255,255,0.15);cursor:pointer;transition:transform .15s;}
.bg-swatch:hover,.bg-swatch.sel{transform:scale(1.2);border-color:var(--accent);}
/* CHECKLIST */
.checklist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;}
.checklist-card{background:var(--navy-mid);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:1.2rem;}
.checklist-card h4{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;margin-bottom:.9rem;display:flex;align-items:center;gap:8px;}
.check-item{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:13px;color:var(--gray-400);}
.check-item:last-child{border-bottom:none;}
.check-item input[type=checkbox]{accent-color:var(--accent);margin-top:2px;flex-shrink:0;}
.check-item.done label{text-decoration:line-through;color:rgba(255,255,255,0.22);}
/* TABLE */
.ref-table{width:100%;border-collapse:collapse;font-size:13px;}
.ref-table th{padding:13px 14px;text-align:left;color:var(--gray-400);font-weight:500;border-bottom:1px solid rgba(255,255,255,0.08);}
.ref-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);}
.ref-table tr:nth-child(even) td{background:rgba(255,255,255,0.018);}
.ref-table tr:last-child td{border-bottom:none;}
/* BREADCRUMB */
.breadcrumb{max-width:820px;margin:0 auto;padding:1.2rem 2rem 0;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--gray-600);}
.breadcrumb a{color:var(--gray-400);transition:color .2s;}
.breadcrumb a:hover{color:var(--white);}
/* SEO CONTENT */
.seo-content{max-width:820px;margin:0 auto;padding:0 2rem 4rem;}
.seo-content h2{font-family:'Syne',sans-serif;font-size:1.25rem;font-weight:700;margin:2rem 0 .6rem;}
.seo-content p{color:var(--gray-400);font-size:.95rem;line-height:1.8;margin-bottom:.7rem;}
.seo-content ul{color:var(--gray-400);font-size:.95rem;line-height:1.8;padding-left:1.3rem;margin-bottom:.8rem;}
.seo-content li{margin-bottom:.3rem;}
/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;background:var(--navy-light);border:1px solid rgba(255,255,255,0.12);color:var(--white);padding:11px 18px;border-radius:10px;font-size:14px;z-index:999;transform:translateY(100px);opacity:0;transition:all .3s;}
.toast.show{transform:translateY(0);opacity:1;}
/* FOOTER */
footer{border-top:1px solid rgba(255,255,255,0.06);padding:2rem;text-align:center;color:var(--gray-600);font-size:13px;}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:.6rem;}
.footer-links a{color:var(--gray-400);transition:color .2s;}
.footer-links a:hover{color:var(--white);}
@media(max-width:600px){.nav-pills{display:none;}.hero{padding:3rem 1.2rem 2rem;}.tool-box{padding:1.3rem;}.preview-flex{flex-direction:column;}.tool-page{padding:1.5rem 1.2rem 4rem;}}

/* ── LIVE STATS PANEL ── */
.live-stats{display:none;background:rgba(245,166,35,0.06);border:1px solid rgba(245,166,35,0.2);border-radius:12px;padding:.9rem 1.2rem;margin-bottom:1.3rem;gap:1.2rem;flex-wrap:wrap;align-items:center;}
.ls-item{font-size:12px;color:var(--gray-400);line-height:1.7;}
.ls-item strong{color:var(--white);display:block;font-size:14px;}
.ls-arrow{color:var(--accent);font-size:1.2rem;font-weight:700;}
.ls-warn{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);}

/* ── POLICY / STATIC PAGES ── */
.policy-page{max-width:820px;margin:0 auto;padding:2.5rem 2rem 5rem;}
.policy-page h1{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.15;letter-spacing:-.8px;margin-bottom:.6rem;}
.policy-page .last-updated{color:var(--gray-600);font-size:13px;margin-bottom:2.5rem;}
.policy-page h2{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:700;margin:2rem 0 .7rem;color:var(--white);}
.policy-page h3{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--accent);}
.policy-page p{color:var(--gray-400);font-size:.95rem;line-height:1.85;margin-bottom:.9rem;}
.policy-page ul,.policy-page ol{color:var(--gray-400);font-size:.95rem;line-height:1.85;padding-left:1.4rem;margin-bottom:.9rem;}
.policy-page li{margin-bottom:.35rem;}
.policy-page a{color:var(--accent);}
.policy-page .highlight-box{background:rgba(245,166,35,0.07);border:1px solid rgba(245,166,35,0.2);border-radius:12px;padding:1.1rem 1.3rem;margin:1.5rem 0;font-size:14px;color:var(--white);line-height:1.7;}
.policy-page .info-box{background:rgba(59,130,246,0.07);border:1px solid rgba(59,130,246,0.2);border-radius:12px;padding:1.1rem 1.3rem;margin:1.5rem 0;font-size:13.5px;color:#93c5fd;line-height:1.7;}

/* ── CONTACT FORM ── */
.contact-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
.form-group label{display:block;font-size:11.5px;font-weight:600;color:var(--gray-400);margin-bottom:5px;text-transform:uppercase;letter-spacing:.8px;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:var(--white);border-radius:9px;padding:10px 13px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s;resize:vertical;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);}
.form-group select option{background:var(--navy-mid);}
.form-success{display:none;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);border-radius:11px;padding:1.1rem 1.3rem;font-size:14px;color:#86efac;margin-top:1rem;}

/* ==========================================================================
   PREMIUM 3D SILK FLAG ENGINE
   ========================================================================== */
.flag-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; /* Slightly larger to show off the detail */
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  /* Deep, elegant drop shadow */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  
  /* 3D Engine Attachments */
  transform-origin: center left; /* Attaches to an invisible flagpole on the left */
  perspective: 200px;
  animation: flagWave3D 3s ease-in-out infinite;
}

.flag-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hyper-active wave when user hovers over the logo */
.logo:hover .flag-container,
.logo:focus-within .flag-container {
  animation: flagSalute3D 0.5s ease-in-out infinite alternate;
}

/* 3D Wave Keyframes */
@keyframes flagWave3D {
  0%, 100% { 
    transform: rotateY(0deg) rotateZ(0deg) skewY(0deg); 
  }
  50% { 
    /* Y-axis rotation gives it true 3D depth */
    transform: rotateY(-18deg) rotateZ(3deg) skewY(-2deg); 
  }
}

@keyframes flagSalute3D {
  0% { 
    transform: rotateY(0deg) rotateZ(-2deg) scale(1.05); 
  }
  100% { 
    transform: rotateY(-25deg) rotateZ(5deg) skewY(-4deg) scale(1.15); 
  }
}