/*
Theme Name: Peramoo
Author: Tieumy Network
Description: Custom theme for peramoo.org – Philippine loan comparison platform. Layout E.
Version: 2.0
*/

* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img { max-width:100%; height:auto; vertical-align:middle; }
:root {
  --primary: #0891B2; --primary-dark: #0E7490;
  --accent: #2DD4BF; --accent-light: #99F6E4;
  --bg: #ECFEFF; --text: #164E63;
  --gray: #4A5568; --light: #CFFAFE;
  --white: #FFFFFF; --border: #A5F3FC;
  --shadow: 0 2px 12px rgba(8,145,178,0.12);
  --shadow-lg: 0 8px 32px rgba(8,145,178,0.2);
  --radius: 12px; --radius-lg: 20px;
  --gradient: linear-gradient(135deg, #0891B2, #0E7490, #2DD4BF);
  --gradient-accent: linear-gradient(135deg, #2DD4BF, #0891B2);
}
body { font-family:'Segoe UI',Roboto,sans-serif; line-height:1.7; color:var(--text); background:var(--bg); }
a { color:var(--primary); text-decoration:none; transition:all .3s; }
a:hover { color:var(--primary-dark); }
.container { max-width:1140px; margin:0 auto; padding:0 20px; }

/* ===== HEADER ===== */
.site-header { background:var(--white); border-bottom:3px solid var(--primary); padding:15px 0; position:sticky; top:0; z-index:100; box-shadow:var(--shadow); }
.site-header .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:26px; font-weight:800; color:var(--primary-dark); text-transform:uppercase; letter-spacing:1px; }
.logo span { color:var(--primary); }
.menu-toggle { display:none; }
.nav-menu { display:flex; gap:25px; list-style:none; }
.nav-menu a { font-weight:600; color:var(--text); padding:5px 0; border-bottom:2px solid transparent; }
.nav-menu a:hover { color:var(--primary); border-bottom-color:var(--primary); }

/* ===== HERO - SPLIT SCREEN ===== */
.hero-split { display:flex; align-items:center; min-height:85vh; padding:60px 0; gap:40px; }
.hero-text { flex:1; }
.hero-text h1 { font-size:48px; font-weight:900; color:var(--primary-dark); line-height:1.2; margin-bottom:20px; }
.hero-text h1 em { font-style:normal; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-text p { font-size:18px; color:var(--gray); max-width:540px; margin-bottom:30px; line-height:1.7; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }
.hero-visual { flex:1; display:flex; align-items:center; justify-content:center; }
.hero-gradient-box { width:100%; max-width:480px; aspect-ratio:1/1; border-radius:var(--radius-lg); 
  background:var(--gradient); display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.hero-gradient-box::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%); animation:heroGlow 6s ease-in-out infinite alternate; }
@keyframes heroGlow { 0% { transform:translate(-30%,-30%) rotate(0deg); } 100% { transform:translate(30%,30%) rotate(10deg); } }
.hero-emoji-main { font-size:120px; position:relative; z-index:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15)); }
.hero-emoji-sub { font-size:40px; position:relative; z-index:1; margin-top:10px; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 36px; border-radius:50px; font-weight:700; font-size:15px; cursor:pointer; transition:all .3s; border:none; text-transform:uppercase; letter-spacing:1px; }
.btn-primary { background:var(--gradient); color:var(--white); box-shadow:0 4px 16px rgba(8,145,178,0.35); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(8,145,178,0.45); }
.btn-outline { background:transparent; color:var(--primary-dark); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:var(--white); transform:translateY(-3px); }
.btn-teal { background:var(--gradient-accent); color:var(--white); box-shadow:0 4px 16px rgba(45,212,191,0.35); }
.btn-teal:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(45,212,191,0.45); }

/* ===== SECTIONS ===== */
section { padding:70px 0; }
.section-title { font-size:36px; color:var(--primary-dark); margin-bottom:10px; text-align:center; font-weight:800; letter-spacing:-0.5px; }
.section-sub { text-align:center; color:var(--gray); margin-bottom:45px; font-size:16px; max-width:600px; margin-left:auto; margin-right:auto; }
.section-title em { font-style:normal; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ===== FEATURES GRID - 3x2 with Border Gradient ===== */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.feature-card { background:var(--white); border-radius:var(--radius); padding:35px 28px; position:relative; transition:all .3s; text-align:center; overflow:hidden; }
.feature-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius); padding:2px; 
  background:var(--gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.feature-card .icon { font-size:44px; margin-bottom:16px; display:block; }
.feature-card h3 { font-size:19px; color:var(--primary-dark); margin-bottom:10px; }
.feature-card p { color:var(--gray); font-size:14px; line-height:1.6; }

/* ===== LOAN TIERS ===== */
.loan-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.loan-tier { background:var(--white); border-radius:var(--radius-lg); padding:40px 30px; text-align:center; transition:all .3s; border:1px solid var(--border); position:relative; overflow:hidden; }
.loan-tier:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.loan-tier.popular { border:2px solid var(--primary); box-shadow:0 0 0 4px rgba(8,145,178,0.08), var(--shadow-lg); }
.loan-tier .tier-badge { position:absolute; top:12px; right:12px; background:var(--gradient); color:var(--white); padding:4px 14px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.loan-tier .tier-icon { font-size:48px; margin-bottom:10px; }
.loan-tier h3 { font-size:22px; color:var(--primary-dark); margin-bottom:4px; }
.loan-tier .tier-range { font-size:14px; color:var(--gray); margin-bottom:15px; }
.loan-tier .tier-amount { font-size:32px; font-weight:900; color:var(--primary); margin-bottom:6px; }
.loan-tier .tier-apr { font-size:13px; color:var(--gray); margin-bottom:20px; }
.loan-tier ul { list-style:none; text-align:left; margin-bottom:25px; }
.loan-tier ul li { padding:6px 0; font-size:14px; color:var(--text); }
.loan-tier ul li::before { content:'✓ '; color:var(--accent); font-weight:700; }
.loan-tier .btn { width:100%; justify-content:center; }

/* ===== ALTERNATING ROWS ===== */
.alt-row { display:flex; align-items:center; gap:50px; margin-bottom:50px; }
.alt-row:last-child { margin-bottom:0; }
.alt-row:nth-child(even) { flex-direction:row-reverse; }
.alt-row-visual { flex:1; display:flex; align-items:center; justify-content:center; }
.alt-row-visual .alt-emoji { font-size:120px; filter:drop-shadow(0 8px 20px rgba(8,145,178,0.15)); }
.alt-row-content { flex:1; }
.alt-row-content h3 { font-size:28px; color:var(--primary-dark); margin-bottom:14px; font-weight:800; }
.alt-row-content p { font-size:16px; color:var(--gray); line-height:1.7; }

/* ===== PARTNERS ===== */
.partners-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.partner-card { background:var(--white); border-radius:var(--radius); padding:25px; transition:all .3s; border:1px solid var(--border); display:flex; flex-direction:column; }
.partner-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.partner-card .partner-header { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.partner-card .partner-icon { font-size:32px; }
.partner-card h4 { font-size:17px; color:var(--primary-dark); }
.partner-card .partner-desc { font-size:14px; color:var(--gray); margin-bottom:14px; line-height:1.5; flex:1; }
.partner-card .partner-rates { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.partner-card .rate-badge { background:var(--light); color:var(--primary-dark); padding:3px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.partner-card .partner-cta { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:700; font-size:14px; }
.partner-card .partner-cta:hover { gap:10px; color:var(--primary-dark); }

/* ===== REVIEWS ===== */
.reviews-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.review-card { background:var(--white); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); position:relative; }
.review-card::before { content:'"'; position:absolute; top:10px; left:20px; font-size:80px; color:var(--accent); opacity:0.2; font-family:Georgia,serif; line-height:1; }
.review-card .review-stars { color:#FBBF24; font-size:20px; margin-bottom:10px; }
.review-card .review-text { font-size:15px; color:var(--gray); line-height:1.7; margin-bottom:16px; font-style:italic; }
.review-card .review-author { display:flex; align-items:center; gap:12px; }
.review-card .review-avatar { width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:var(--white); font-weight:700; font-size:18px; }
.review-card .review-name { font-weight:700; color:var(--text); font-size:14px; }
.review-card .review-location { font-size:12px; color:var(--gray); }

/* ===== FAQ ===== */
.faq-section { background:var(--light); }
.faq-item { background:var(--white); border-radius:var(--radius); padding:20px 25px; margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--border); cursor:pointer; transition:all .3s; }
.faq-item:hover { border-color:var(--primary); }
.faq-question { font-weight:700; font-size:16px; color:var(--text); display:flex; justify-content:space-between; align-items:center; }
.faq-question span { transition:transform .3s; font-size:14px; color:var(--primary); }
.faq-item.active .faq-question span { transform:rotate(180deg); }
.faq-answer { margin-top:12px; font-size:14px; color:var(--gray); display:none; line-height:1.7; }
.faq-item.active .faq-answer { display:block; }

/* ===== BLOG ===== */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:25px; }
.blog-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all .3s; }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card img { width:100%; height:200px; object-fit:cover; }
.blog-card-content { padding:20px 25px 25px; }
.blog-card .blog-card-cat { display:inline-block; background:var(--light); color:var(--primary); padding:2px 12px; border-radius:20px; font-size:12px; font-weight:600; margin-bottom:10px; }
.blog-card h3 { font-size:18px; margin-bottom:8px; line-height:1.4; }
.blog-card h3 a { color:var(--text); }
.blog-card h3 a:hover { color:var(--primary); }
.blog-card .meta { font-size:13px; color:var(--gray); margin-bottom:10px; }
.blog-card p { font-size:14px; color:var(--gray); line-height:1.6; }

/* ===== FOOTER ===== */
.site-footer { background:var(--primary-dark); color:var(--white); padding:50px 0 20px; }
.site-footer .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; }
.site-footer h4 { font-size:18px; margin-bottom:15px; color:var(--accent-light); }
.site-footer p, .site-footer a { font-size:14px; color:rgba(255,255,255,.8); line-height:2; }
.site-footer a:hover { color:var(--accent); }
.footer-bottom { text-align:center; padding-top:20px; margin-top:20px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; color:rgba(255,255,255,.55); }

/* ===== STEPS ===== */
.steps { counter-reset:step; }
.step-item { display:flex; gap:20px; align-items:flex-start; margin-bottom:20px; background:var(--white); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); }
.step-num { counter-increment:step; width:44px; height:44px; min-width:44px; background:var(--gradient); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; }
.step-content h4 { font-size:17px; color:var(--primary-dark); margin-bottom:5px; }
.step-content p { font-size:14px; color:var(--gray); }

/* ===== CONTENT / PAGE / POST ===== */
.content-area { padding:40px 0; }
.content-area h2 { color:var(--primary-dark); margin:30px 0 15px; font-size:26px; }
.content-area h3 { font-size:20px; margin:25px 0 12px; color:var(--primary); }
.content-area p { margin-bottom:15px; color:var(--text); }
.content-area ul { margin:15px 0 15px 25px; }
.content-area ul li { margin-bottom:8px; }
.page-title { font-size:36px; color:var(--primary-dark); margin-bottom:25px; font-weight:800; line-height:1.2; }
.page-body { font-size:16px; line-height:1.8; }
.page-body h2 { color:var(--primary-dark); margin:30px 0 15px; font-size:26px; }
.page-body h3 { font-size:20px; margin:25px 0 12px; color:var(--primary); }
.page-body p { margin-bottom:15px; }
.page-body ul { margin:15px 0 15px 25px; }
.page-body ul li { margin-bottom:8px; }

.single-post { max-width:800px; margin:0 auto; }
.post-title { font-size:36px; color:var(--primary-dark); margin-bottom:10px; font-weight:800; }
.post-meta { color:var(--gray); font-size:14px; margin-bottom:20px; }
.post-thumbnail { margin-bottom:25px; border-radius:var(--radius); overflow:hidden; }
.post-thumbnail img { width:100%; height:auto; }
.post-content { line-height:1.8; font-size:16px; }
.post-content h2 { color:var(--primary-dark); margin:30px 0 15px; font-size:24px; }
.post-content h3 { font-size:20px; margin:25px 0 12px; color:var(--primary); }
.post-content p { margin-bottom:15px; }
.post-content ul { margin:15px 0 15px 25px; }
.post-content ul li { margin-bottom:8px; }

.post-thumbnail, .article-feat-image, .pg-thumb { overflow:hidden; border-radius:var(--radius); }
.post-thumbnail img, .article-feat-image img, .pg-thumb img { width:100%; height:auto; max-width:100%; }
@media(max-width:768px) { .post-thumbnail, .article-feat-image, .pg-thumb { max-height:300px; } .post-thumbnail img, .article-feat-image img, .pg-thumb img { width:100%; height:auto; object-fit:cover; } }
.single-post .post-thumbnail img, .article-single .article-feat-image img, .post-single .pg-thumb img { max-width:100%!important;width:100%!important;height:auto!important;display:block; }
.post-content img, .article-content img, .pg-content img { max-width:100%!important;height:auto!important; }
@media(max-width:480px) { .single-post, .article-single, .post-single { padding:0; } .post-thumbnail, .article-feat-image, .pg-thumb { margin-left:-20px;margin-right:-20px;border-radius:0; } }

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .hero-split { flex-direction:column; min-height:auto; padding:40px 0; text-align:center; }
  .hero-text p { max-width:100%; margin-left:auto; margin-right:auto; }
  .hero-buttons { justify-content:center; }
  .hero-gradient-box { max-width:360px; }
  .hero-text h1 { font-size:40px; }
  .features-grid, .loan-tiers, .partners-grid { grid-template-columns:repeat(2,1fr); }
  .reviews-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .hero-text h1 { font-size:32px; }
  .hero-emoji-main { font-size:80px; }
  .hero-gradient-box { max-width:280px; }
  .features-grid, .loan-tiers, .partners-grid { grid-template-columns:1fr; }
  .section-title { font-size:28px; }
  .alt-row { flex-direction:column !important; gap:20px; text-align:center; }
  .alt-row-content h3 { font-size:24px; }
  .alt-row-visual .alt-emoji { font-size:80px; }
  .nav-menu { flex-direction:column; gap:10px; width:100%; margin-top:10px; }
  .hero-buttons .btn { flex:1; min-width:200px; justify-content:center; }
}
@media(max-width:480px) {
  .loan-tier { padding:25px 20px; }
  .hero-text h1 { font-size:28px; }
  .hero-gradient-box { max-width:220px; }
  .hero-emoji-main { font-size:60px; }
  .partner-card { padding:18px; }
  .review-card { padding:20px; }
}

/* Responsive tables */
.table-wrapper, .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper table, .compare-table-wrap table { min-width: 500px; }
.apply-cell { white-space: nowrap; }
@media(max-width:768px) {
  .table-wrapper table, .compare-table-wrap table { min-width: 400px; }
  .lender-table th, .lender-table td, .compare-table th, .compare-table td { padding: 8px 6px; font-size: 13px; }
  .btn-sm { padding: 8px 14px; font-size: 13px; }
}

/* Hamburger menu icon via CSS */
.menu-toggle { font-size:0 !important; width:30px; height:24px; position:relative; }
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span.hamb-line { content:''; position:absolute; left:0; width:100%; height:3px; background:var(--primary-dark); border-radius:2px; transition:all .3s; }
.menu-toggle::before { top:0; }
.menu-toggle::after { bottom:0; }
.menu-toggle .hamb-line { top:50%; transform:translateY(-50%); }
.menu-toggle.active::before { transform:rotate(45deg); top:10px; }
.menu-toggle.active::after { transform:rotate(-45deg); bottom:10px; }
.menu-toggle.active .hamb-line { opacity:0; }
@media(max-width:768px) {
  .menu-toggle { width:28px; height:20px; margin-left:auto; }
}