@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{--brand:#166534;--brand_light:#22c55e;--brand_pale:#eafaf0;--blue:#155fa0;--blue_light:#2f80ed;--blue_pale:#eaf3fc;--bg:#f4f7fb;--surface:#ffffff;--text:#1c2b3a;--text_muted:#64748b;--border:#dfe6ee;--success:#16a34a;--danger:#dc2626;--warning:#d97706;--radius:12px;--shadow:0 4px 14px rgba(15,35,65,.08);--shadow_hover:0 10px 28px rgba(15,35,65,.16);}

*{box-sizing:border-box;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;margin:0;display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg);color:var(--text);line-height:1.6;}

header{background:var(--brand);color:#fff;padding:14px 0;border-bottom:3px solid var(--brand_light);position:sticky;top:0;z-index:100;}
header a{color:#fff;text-decoration:none;}
nav{display:flex;justify-content:space-between;align-items:center;width:92%;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:10px;}
.logo{font-size:1.5em;font-weight:800;display:flex;align-items:center;}
.logo img{width:auto;height:36px;display:block;background:#fff;padding:6px 12px;border-radius:8px;}
nav ul{list-style-type:none;display:flex;margin:0;padding:0;gap:4px;}
nav ul li{margin-left:6px;}
nav ul li a{color:#e3f5ea;font-weight:600;text-decoration:none;padding:9px 16px;border-radius:8px;transition:all .2s ease;}
nav ul li a:hover{color:#fff;background:rgba(255,255,255,.15);}

.url-shortener-form{flex:1;display:flex;justify-content:center;align-items:center;padding:72px 18px 56px;background:linear-gradient(180deg,var(--brand) 0%,var(--brand) 42%,var(--bg) 42%);}
.container{text-align:center;background:var(--surface);padding:36px 30px;border-radius:var(--radius);box-shadow:var(--shadow_hover);width:92%;max-width:520px;margin:auto;}
h1{margin:0 0 22px;font-size:1.7em;font-weight:800;color:var(--brand);}
.ctable{margin:auto;}
.ctable a{color:var(--blue);font-weight:600;word-break:break-all;}
.cblue{color:var(--blue);font-weight:600;}
.customp{color:var(--text_muted);font-size:.85em;margin-top:16px;}
.derror{color:var(--danger);font-size:.8em;font-weight:600;padding:0;margin:8px 0 0;text-align:center;}

form{display:flex;flex-direction:column;align-items:center;width:100%;}
input[type="text"],input[type="email"],input[type="password"]{width:100%;padding:13px 14px;margin-bottom:12px;border:1.5px solid var(--border);border-radius:9px;font-size:.95em;font-family:inherit;background:var(--surface);color:var(--text);transition:border-color .2s ease,box-shadow .2s ease;}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{outline:none;border-color:var(--brand_light);box-shadow:0 0 0 3px rgba(34,197,94,.18);}

button{padding:13px 20px;border:none;background:linear-gradient(135deg,var(--brand) 0%,var(--brand_light) 100%);color:#fff;font-weight:700;font-size:.95em;border-radius:9px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;width:100%;box-shadow:0 4px 12px rgba(22,101,52,.25);}
button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(22,101,52,.35);}
button:active{transform:translateY(0);}

.hidden{display:none;}

.how-it-works,.faq{background:var(--bg);padding:64px 18px;text-align:center;}
.how-it-works h2,.faq h2,.pricing h2{margin:0 0 40px;font-size:1.8em;font-weight:800;color:var(--brand);}
.features-container{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1100px;margin:0 auto;}
.feature{background:var(--surface);padding:28px 22px;border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:300px;text-align:center;transition:transform .2s ease,box-shadow .2s ease;border:1px solid var(--border);}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow_hover);}
.feature h3{color:var(--brand);margin-top:0;}
.feature p{color:var(--text_muted);margin-bottom:0;}

.pricing{background:var(--surface);padding:64px 18px;text-align:center;}
.pricing-table{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1100px;margin:0 auto;align-items:stretch;}
.pricing-card{background:var(--surface);padding:0 0 28px;border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:300px;text-align:center;border:1px solid var(--border);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.pricing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow_hover);}
.pricing-card h3{margin:0 0 18px;color:#fff;padding:18px 0;border-radius:var(--radius) var(--radius) 0 0;font-size:1.1em;letter-spacing:.5px;}
.pricing-card h3.free{background:linear-gradient(135deg,#64748b 0%,#475569 100%);}
.pricing-card h3.pro{background:linear-gradient(135deg,var(--brand) 0%,var(--brand_light) 100%);}
.pricing-card h3.enterprise{background:linear-gradient(135deg,#0b3d2e 0%,#052e1c 100%);}
.price{font-size:2.2em;font-weight:800;margin:0 0 22px;color:var(--brand);}
.price span{font-size:.4em;color:var(--text_muted);font-weight:600;}
.pricing-card ul{list-style:none;padding:0 24px;margin:0 0 24px;text-align:left;flex:1;}
.pricing-card ul li{margin-bottom:12px;padding-left:22px;position:relative;color:var(--text);font-size:.92em;}
.pricing-card ul li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:800;}
.pricing-card>a{padding:0 24px;}
.pricing-card button{padding:12px 18px;border:none;background:linear-gradient(135deg,var(--brand) 0%,var(--brand_light) 100%);color:#fff;font-weight:700;border-radius:9px;cursor:pointer;transition:transform .15s ease;width:100%;box-shadow:none;}
.pricing-card button:hover{transform:translateY(-1px);}

h2{color:var(--brand);font-weight:800;}
.centered-table{margin:0 auto;}
.centered-table td{padding:6px 8px;text-align:left;}
.centered-table label{font-weight:600;color:var(--text);font-size:.9em;}
.centered-table img{border-radius:6px;border:1.5px solid var(--border);vertical-align:middle;}
.centered-text{text-align:center;}
.ctable1{border-collapse:collapse;margin:24px auto;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.ctable1 th{border:none;border-bottom:2px solid var(--border);padding:12px 16px;background:var(--brand);color:#fff;font-weight:600;font-size:.85em;text-transform:uppercase;letter-spacing:.5px;}
.ctable1 td{border:none;border-bottom:1px solid var(--border);padding:12px 16px;font-size:.9em;}
.ctable1 tr:last-child td{border-bottom:none;}
.ctable1 tr:nth-child(even){background:var(--brand_pale);}
.ctable1 a{color:var(--brand);font-weight:600;}

.register,.login{width:100%;max-width:480px;margin:56px auto;background:var(--surface);padding:36px 30px;border-radius:var(--radius);box-shadow:var(--shadow_hover);}

footer{background:var(--brand);color:#dff5e6;text-align:center;padding:22px 0;font-weight:600;font-size:.85em;border-top:3px solid var(--brand_light);margin-top:auto;}
footer a{color:#dff5e6;}

@media (max-width:768px){
nav ul{width:100%;justify-content:center;}
nav ul li{margin:4px 2px;}
.register,.login{width:92%;margin:24px auto;padding:28px 20px;}
.url-shortener-form{padding:52px 14px 40px;}
}