/* ============================================================
   Mr.6 Growth Agency — Master Stylesheet
   Aesthetic: Bold Editorial / Powerful Energy / Blue Luxe
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Montserrat:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
    /* Palette — Blue */
    --bg:          #F0F4FA;
    --bg-white:    #FFFFFF;
    --text-primary:#0A0F1E;
    --text-muted:  #5A6580;
    --accent:      #1A5CFF;
    --accent-glow: #4D8AFF;
    --accent-dark: #0D3FCC;
    --border:      #D4DCED;
    --tag-bg:      #E8F0FF;
    --tag-text:    #0D3FCC;
    --surface:     #E4EAF5;

    /* Typography */
    --font-display: 'Montserrat', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-serif:   'Merriweather', Georgia, serif;

    /* Spacing */
    --max-width: 1200px;
    --max-read:  720px;
    --nav-h:     80px;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* ---- ANIMATED BACKGROUND ---- */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 90% 70% at 15% 25%, rgba(26,92,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 80% 70%, rgba(77,138,255,0.04) 0%, transparent 50%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(13,63,204,0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: bgShift 16s ease-in-out infinite alternate;
}
@keyframes bgShift {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Logo watermark in the background */
.bg-watermark {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.bg-watermark img {
    width: clamp(400px, 50vw, 700px);
    height: auto;
    opacity: 0.03;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }

/* ---- UTILITY ---- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 60px;
    padding-right: 60px;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.read-width { max-width:var(--max-read); margin:0 auto; padding:0 24px; }
.accent { color:var(--accent); }
.tag {
    display:inline-block; background:var(--tag-bg); color:var(--tag-text);
    font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:4px 12px; border-radius:100px;
}

/* ---- HEADER ---- */
.nav {
    position:relative; z-index:100;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, #0A0F1E 0%, #111B3A 50%, #0D2147 100%);
    padding:48px 24px 44px;
}
.nav::after {
    content:'';
    position:absolute;
    bottom:-20px; left:0; right:0;
    height:20px;
    background: linear-gradient(to bottom, rgba(10,15,30,0.15) 0%, transparent 100%);
    pointer-events:none;
    z-index:99;
}
/* Greeting animation + logo */
.nav__greeting {
    display:flex; align-items:center; justify-content:center;
    gap:0;
    z-index:101;
    position:relative;
}
.nav__handwriting {
    font-family: 'Caveat', cursive;
    font-size: 30px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.05s linear, padding 0.1s;
}
#typewriter-left.typing {
    padding-right: 24px;
}
#typewriter-right.typing {
    padding-left: 24px;
}
.nav__cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: rgba(255,255,255,0.6);
    margin-left: 2px;
    vertical-align: middle;
    animation: blink-caret 0.6s step-end infinite;
}
.nav__cursor.hidden { opacity: 0; }
@keyframes blink-caret {
    50% { opacity: 0; }
}
.nav__greeting .nav__logo {
    display:inline-flex; align-items:center;
    position: relative;
    top: -6px;
}
.nav__greeting .nav__logo img {
    height: 44px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.15));
    transition: filter 0.4s, transform 0.4s;
}
.nav__greeting .nav__logo:hover img {
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.25));
    transform: scale(1.05);
}

/* Admin header links */
.nav__admin-links {
    display:flex; align-items:center; gap:24px;
    margin-top:14px;
}
.nav__admin-links a {
    font-size:13px; font-weight:600; color:rgba(255,255,255,0.55);
    transition:color 0.2s; letter-spacing:0.03em;
}
.nav__admin-links a:hover { color:#fff; }

/* ---- HERO ---- */
.hero {
    padding-top: 80px;
    padding-bottom:80px;
    position:relative;
    overflow:hidden;
}
.hero__tag { margin-bottom:24px; }
.hero h1 {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(48px, 7vw, 96px); line-height:1.02;
    letter-spacing:-0.04em; max-width:900px;
    margin-bottom:28px;
}
.hero h1 em {
    font-style:normal;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 50%, #7EB3FF 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero__sub {
    font-family:var(--font-serif); font-size:clamp(18px,2.2vw,24px);
    color:var(--text-muted); max-width:620px; line-height:1.5;
    margin-bottom:40px;
}
.hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color:#fff; padding:16px 36px;
    border-radius:100px; font-family:var(--font-display); font-weight:800;
    font-size:16px; letter-spacing:0.01em; border:none; cursor:pointer;
    transition:all 0.3s; position:relative; overflow:hidden;
}
.btn-primary::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2));
    transition:opacity 0.3s;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
    transform:translateY(-2px);
    box-shadow:0 8px 32px rgba(26,92,255,0.4);
}
.btn-secondary {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--text-primary); padding:16px 36px;
    border-radius:100px; font-family:var(--font-display); font-weight:800;
    font-size:16px; border:2px solid var(--border); cursor:pointer;
    transition:all 0.3s;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* ---- STATS BAR ---- */
.stats {
    padding:48px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.stats__grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:32px;
    text-align:center;
}
.stats__num {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(36px,5vw,56px); letter-spacing:-0.03em;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.stats__label {
    font-size:14px; color:var(--text-muted); margin-top:4px;
    font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
}

/* ---- SECTIONS ---- */
.section {
    padding:100px 0;
}
.section__label {
    font-family:var(--font-display); font-weight:800;
    font-size:12px; letter-spacing:0.15em; text-transform:uppercase;
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:16px;
}
.section__title {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(32px,4.5vw,56px); letter-spacing:-0.03em;
    line-height:1.08; max-width:700px; margin-bottom:20px;
}
.section__desc {
    font-family:var(--font-serif); font-size:18px; color:var(--text-muted);
    max-width:560px; line-height:1.6; margin-bottom:48px;
}

/* Services Grid */
.services-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%),1fr)); gap:24px;
}
.service-card {
    background:var(--bg-white); border:1px solid var(--border);
    border-radius:16px; padding:36px; position:relative;
    transition:all 0.35s; overflow:hidden;
}
.service-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-glow));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.4s;
}
.service-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,92,255,0.1); }
.service-card:hover::before { transform:scaleX(1); }
.service-card__icon {
    width:52px; height:52px; border-radius:14px;
    background:var(--tag-bg); display:flex; align-items:center;
    justify-content:center; font-size:24px; margin-bottom:20px;
}
.service-card h3 {
    font-family:var(--font-display); font-weight:800; font-size:22px;
    letter-spacing:-0.02em; margin-bottom:10px;
}
.service-card p { font-size:15px; color:var(--text-muted); line-height:1.55; }

/* ---- MARQUEE ---- */
.marquee {
    padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    overflow:hidden; white-space:nowrap;
}
.marquee__inner {
    display:inline-flex; gap:48px; animation:marquee 20s linear infinite;
}
.marquee__item {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(24px,3vw,40px); letter-spacing:-0.02em;
    color:var(--border); flex-shrink:0;
}
.marquee__item .dot { color:var(--accent); margin:0 8px; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- CTA BAND ---- */
.cta-band {
    padding:80px 0;
    background: linear-gradient(135deg, #0A0F1E 0%, #111B3A 50%, #0D2147 100%);
    color:#fff;
    text-align:center; position:relative; overflow:hidden;
}
.cta-band::before {
    content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
    width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle, rgba(26,92,255,0.2) 0%, transparent 70%);
}
.cta-band::after {
    content:''; position:absolute; bottom:-150px; right:-100px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(77,138,255,0.12) 0%, transparent 70%);
    pointer-events:none;
}
.cta-band h2 {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(32px,5vw,64px); letter-spacing:-0.03em;
    margin-bottom:16px; position:relative;
}
.cta-band p {
    font-family:var(--font-serif); font-size:18px;
    color:rgba(255,255,255,0.6); margin-bottom:32px; position:relative;
}
.cta-band .btn-primary { font-size:18px; padding:18px 44px; }
.cta-band .accent {
    background: linear-gradient(135deg, #4D8AFF, #7EB3FF);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ---- NEWSLETTER ---- */
.newsletter {
    background:var(--bg-white); border:1px solid var(--border);
    border-radius:20px; padding:48px;
    text-align:center; max-width:640px; margin:0 auto;
    position:relative; overflow:hidden;
}
.newsletter::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, rgba(26,92,255,0.06) 0%, transparent 70%);
    pointer-events:none;
}
.newsletter h3 {
    font-family:var(--font-display); font-weight:900;
    font-size:28px; letter-spacing:-0.02em; margin-bottom:8px;
}
.newsletter p { color:var(--text-muted); font-size:15px; margin-bottom:24px; }
.newsletter__form { display:flex; gap:10px; max-width:440px; margin:0 auto; position:relative; }
.newsletter__input {
    flex:1; padding:14px 20px; border:2px solid var(--border);
    border-radius:100px; font-size:15px; font-family:var(--font-body);
    background:#fff; outline:none; transition:border-color 0.2s;
}
.newsletter__input:focus { border-color:var(--accent); }
.newsletter__btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color:#fff; border:none;
    padding:14px 28px; border-radius:100px; font-family:var(--font-display);
    font-weight:800; font-size:15px; cursor:pointer; transition:all 0.3s;
    white-space:nowrap;
}
.newsletter__btn:hover { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); }

/* ---- FOOTER ---- */
.footer {
    padding:60px 0 32px; border-top:1px solid var(--border);
    position:relative; z-index:1;
}
.footer__top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:40px; }
.footer__brand { max-width:320px; }
.footer__logo {
    display:flex; align-items:center; gap:10px;
    margin-bottom:12px;
}
.footer__logo img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity 0.3s;
}
.footer__logo:hover img {
    opacity: 0.8;
}
.footer__desc { font-size:14px; color:var(--text-muted); line-height:1.6; }
.footer__col h4 {
    font-family:var(--font-display); font-weight:800; font-size:14px;
    text-transform:uppercase; letter-spacing:0.08em; margin-bottom:16px;
}
.footer__col a { display:block; font-size:14px; color:var(--text-muted); padding:4px 0; transition:color 0.2s; }
.footer__col a:hover { color:var(--accent); }
.footer__bottom {
    border-top:1px solid var(--border); padding-top:24px;
    display:flex; justify-content:space-between; align-items:center;
    font-size:13px; color:var(--text-muted); flex-wrap:wrap; gap:16px;
}

/* ================================================
   BLOG — Medium-like Design
   ================================================ */

/* Blog listing */
.blog-hero {
    padding-top:60px; padding-bottom:40px;
    border-bottom:1px solid var(--border);
}
.blog-hero h1 {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(36px,5vw,56px); letter-spacing:-0.03em;
}
.blog-hero p {
    font-family:var(--font-serif); font-size:18px;
    color:var(--text-muted); margin-top:8px;
}

/* Featured post */
.featured {
    padding:48px 0; border-bottom:1px solid var(--border);
}
.featured__inner {
    display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;
}
.featured__img {
    width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px;
}
.featured__meta {
    font-size:13px; color:var(--text-muted); margin-bottom:12px;
    display:flex; align-items:center; gap:16px;
}
.featured__content h2 {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(24px,3vw,36px); letter-spacing:-0.02em;
    line-height:1.15; margin-bottom:12px;
}
.featured__content h2 a:hover { color:var(--accent); transition:color 0.2s; }
.featured__excerpt {
    font-family:var(--font-serif); font-size:17px;
    color:var(--text-muted); line-height:1.55; margin-bottom:20px;
}
.read-more {
    font-family:var(--font-display); font-weight:800;
    font-size:14px; color:var(--accent); display:inline-flex;
    align-items:center; gap:6px; transition:gap 0.3s;
}
.read-more:hover { gap:10px; }

/* Post grid */
.posts-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(min(340px, 100%),1fr));
    gap:32px; padding:48px 0;
}
.post-card { display:flex; flex-direction:column; }
.post-card__img {
    width:100%; aspect-ratio:16/10; object-fit:cover;
    border-radius:10px; margin-bottom:16px; transition:transform 0.4s;
}
.post-card:hover .post-card__img { transform:scale(1.02); }
.post-card__meta {
    font-size:13px; color:var(--text-muted); margin-bottom:8px;
    display:flex; align-items:center; gap:12px;
}
.post-card h3 {
    font-family:var(--font-display); font-weight:800; font-size:20px;
    letter-spacing:-0.02em; line-height:1.2; margin-bottom:8px;
}
.post-card h3 a:hover { color:var(--accent); transition:color 0.2s; }
.post-card__excerpt {
    font-family:var(--font-serif); font-size:15px;
    color:var(--text-muted); line-height:1.5;
}

/* ---- Single Post (Medium-like) ---- */
.post-header {
    padding-top:48px; text-align:center;
}
.post-header h1 {
    font-family:var(--font-display); font-weight:900;
    font-size:clamp(32px,5vw,52px); letter-spacing:-0.03em;
    line-height:1.1; max-width:800px; margin:0 auto 16px;
}
.post-header__excerpt {
    font-family:var(--font-serif); font-size:20px;
    color:var(--text-muted); max-width:600px; margin:0 auto 24px;
    line-height:1.5;
}
.post-header__meta {
    display:flex; align-items:center; justify-content:center; gap:20px;
    font-size:14px; color:var(--text-muted); padding-bottom:32px;
}
.post-header__author { font-weight:700; color:var(--text-primary); }
.post-cover {
    width:100%; max-height:520px; object-fit:cover; border-radius:12px;
    margin:0 auto 48px;
}

/* Article body — Medium-like reading */
.post-body {
    max-width:var(--max-read); margin:0 auto; padding-bottom:64px;
    font-family:var(--font-serif); font-size:19px;
    line-height:1.75; color:#1A1F2E;
}
.post-body p { margin-bottom:1.5em; }
.post-body h2 {
    font-family:var(--font-display); font-weight:900;
    font-size:28px; letter-spacing:-0.02em;
    margin:2em 0 0.6em; line-height:1.2;
}
.post-body h3 {
    font-family:var(--font-display); font-weight:800;
    font-size:22px; margin:1.8em 0 0.5em; line-height:1.3;
}
.post-body strong { font-weight:700; }
.post-body em { font-style:italic; }
.post-body blockquote {
    border-left:3px solid var(--accent); margin:2em 0; padding:0 0 0 24px;
    font-size:21px; color:var(--text-muted); font-style:italic;
}
.post-body ul, .post-body ol { margin:1em 0 1.5em 1.5em; }
.post-body li { margin-bottom:0.5em; list-style:disc; }

/* Post footer */
.post-footer {
    max-width:var(--max-read); margin:0 auto;
    border-top:1px solid var(--border); padding:40px 0;
    text-align:center;
}

/* ---- ADMIN ---- */
.admin-wrap {
    padding-top:40px; min-height:100vh;
}
.admin-login {
    max-width:400px; margin:80px auto; background:#fff;
    border-radius:16px; padding:40px; border:1px solid var(--border);
}
.admin-login h2 {
    font-family:var(--font-display); font-weight:900;
    font-size:24px; margin-bottom:24px;
}
.form-group { margin-bottom:16px; }
.form-group label {
    display:block; font-size:13px; font-weight:700;
    margin-bottom:6px; letter-spacing:0.04em; text-transform:uppercase;
}
.form-input {
    width:100%; padding:12px 16px; border:2px solid var(--border);
    border-radius:10px; font-size:15px; font-family:var(--font-body);
    outline:none; transition:border-color 0.2s;
}
.form-input:focus { border-color:var(--accent); }
textarea.form-input { min-height:300px; resize:vertical; }
.form-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-glow));
    color:#fff; border:none;
    padding:14px 32px; border-radius:100px; font-family:var(--font-display);
    font-weight:800; font-size:15px; cursor:pointer; transition:all 0.3s;
}
.form-btn:hover { background: linear-gradient(135deg, var(--accent-dark), var(--accent)); }

.admin-table { width:100%; border-collapse:collapse; margin-top:24px; }
.admin-table th {
    text-align:left; font-size:12px; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted);
    padding:12px 16px; border-bottom:2px solid var(--border);
}
.admin-table td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; }
.admin-table tr:hover td { background:var(--surface); }
.admin-table a { color:var(--accent); font-weight:700; }

.alert {
    padding:14px 20px; border-radius:10px; margin-bottom:20px;
    font-size:14px; font-weight:600;
}
.alert-ok { background:#E8F9EE; color:#1A7D3A; }
.alert-err { background:#FEECEC; color:#C62828; }

/* ---- RESPONSIVE ---- */

/* iPad / Tablet (769px – 1024px) */
@media (max-width:1024px) {
    .container { padding-left:40px; padding-right:40px; }
    .featured__inner { grid-template-columns:1fr; }
    .services-grid { grid-template-columns:repeat(2, 1fr); }
}

/* Mobile (768px and below) */
@media (max-width:768px) {
    .container { padding-left:28px; padding-right:28px; }
    .nav { padding:28px 28px 24px; }
    .nav__handwriting { font-size:20px; }
    .nav__greeting .nav__logo img { height:32px; max-width:100px; }
    .footer__logo img { height:28px; }
    .hero { padding-top:32px; padding-bottom:48px; }
    .section { padding:64px 0; }
    .posts-grid { grid-template-columns:1fr; padding:32px 0; gap:28px; }
    .services-grid { grid-template-columns:1fr; }
    .newsletter { padding:32px 24px; }
    .newsletter__form { flex-direction:column; }
    .footer__top { flex-direction:column; }
    .hero__actions { flex-direction:column; }
    .btn-primary, .btn-secondary { justify-content:center; }

    /* Smaller blog text on mobile */
    .post-card__excerpt { font-size:13px; line-height:1.45; }
    .post-card h3 { font-size:17px; }
    .post-card__meta { font-size:12px; }
    .featured__excerpt { font-size:14px; }
    .featured__content h2 { font-size:22px; }
    .post-body { font-size:16px; line-height:1.7; }
    .post-body h2 { font-size:22px; }
    .post-body h3 { font-size:18px; }
    .post-body blockquote { font-size:17px; }
    .post-header__excerpt { font-size:16px; }
    .blog-hero p { font-size:15px; }
    .hero__sub { font-size:16px; }
    .service-card p { font-size:14px; }
}

/* ---- ANIMATIONS ---- */
.fade-up {
    opacity:0; transform:translateY(30px);
    transition:all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

@keyframes pulse-glow {
    0%, 100% { box-shadow:0 0 0 0 rgba(26,92,255,0.3); }
    50% { box-shadow:0 0 0 12px rgba(26,92,255,0); }
}

/* ---- GRADIENT TEXT UTILITY ---- */
.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 50%, #7EB3FF 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}