/* ============================================================
   PNL Fibernet — Public Site Design System
   Palette: deep signal-navy + electric blue + cyan fiber-light
   Type: Poppins (display) / Inter (body)
   ============================================================ */

:root {
    --navy: #0B1F3A;
    --navy-deep: #071630;
    --blue: #1863DC;
    --blue-light: #4C8DFF;
    --cyan: #00D4FF;
    --white: #FFFFFF;
    --bg-soft: #F5F8FC;
    --ink: #16233D;
    --ink-soft: #5B6B85;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-card: 0 10px 40px -12px rgba(11, 31, 58, 0.25);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    background: var(--bg-soft);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-font {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--navy);
}

a { text-decoration: none; }

/* ---------------- Hero / Fiber Backdrop ---------------- */
.fiber-hero {
    position: relative;
    background: radial-gradient(ellipse at top left, #0F2A52 0%, var(--navy) 45%, var(--navy-deep) 100%);
    color: var(--white);
    overflow: hidden;
    padding: 48px 20px 64px;
}

.fiber-hero .fiber-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
}

.fiber-hero .hero-content {
    position: relative;
    z-index: 2;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.brand-lockup .logo-mark {
    width: 44px;
    height: 44px;
}

.brand-lockup .brand-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.2px;
}

.brand-lockup .brand-text small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--cyan);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.fiber-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.35);
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.fiber-eyebrow .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(0,212,255,0.7);
    animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(0,212,255,0.55); }
    70% { box-shadow: 0 0 0 8px rgba(0,212,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,212,255,0); }
}

.hero-question {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    color: var(--white);
    max-width: 620px;
    line-height: 1.25;
}

.hero-sub {
    color: rgba(255,255,255,0.72);
    max-width: 520px;
    font-size: 1rem;
}

/* ---------------- Rating Card ---------------- */
.rating-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px 24px;
    margin-top: -40px;
    position: relative;
    z-index: 3;
}

.star-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 8px;
}

.star-btn {
    background: none;
    border: none;
    font-size: 2.6rem;
    line-height: 1;
    color: #DDE3ED;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
    padding: 4px;
}

.star-btn:hover,
.star-btn.hovered { transform: scale(1.15); }

.star-btn.active,
.star-btn.hovered { color: var(--warning); }

.star-label {
    text-align: center;
    font-weight: 600;
    color: var(--ink-soft);
    min-height: 24px;
    font-size: 0.95rem;
}

.customer-name-tag {
    text-align: center;
    color: var(--blue);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* ---------------- Cards / Sections ---------------- */
.info-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 40px;
    color: var(--ink-soft);
    font-size: 0.88rem;
}

.info-strip .item { display: flex; align-items: center; gap: 8px; }
.info-strip .item i { color: var(--blue); }

.section-pad { padding: 56px 0; }

.feature-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-card);
    height: 100%;
}

.feature-card .icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: var(--white);
    font-size: 1.4rem;
    margin-bottom: 14px;
}

/* ---------------- Buttons ---------------- */
.btn-fiber {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    border: none;
    color: var(--white);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 999px;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-fiber:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--white); }

.btn-outline-navy {
    border: 1.5px solid var(--navy);
    color: var(--navy);
    font-weight: 600;
    border-radius: 999px;
    padding: 10px 24px;
    background: transparent;
}

.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

/* ---------------- Feedback Form ---------------- */
.feedback-form label { font-weight: 600; color: var(--navy); font-size: 0.9rem; }
.feedback-form .form-control, .feedback-form .form-select {
    border-radius: 10px;
    border: 1.5px solid #E3E9F2;
    padding: 10px 14px;
}
.feedback-form .form-control:focus, .feedback-form .form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(24,99,220,0.15);
}

.category-chip {
    border: 1.5px solid #E3E9F2;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}
.category-chip input { display: none; }
.category-chip.active, .category-chip:has(input:checked) {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

/* ---------------- Footer ---------------- */
.site-footer {
    background: var(--navy-deep);
    color: rgba(255,255,255,0.65);
    padding: 32px 0;
    font-size: 0.85rem;
    text-align: center;
}
.site-footer a { color: var(--cyan); }

/* ---------------- Toast / Success ---------------- */
.success-panel {
    text-align: center;
    padding: 40px 20px;
}
.success-panel .check-circle {
    width: 84px; height: 84px; border-radius: 50%;
    background: rgba(34,197,94,0.12);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    color: var(--success);
    font-size: 2.4rem;
}

@media (max-width: 576px) {
    .star-btn { font-size: 2.1rem; }
    .rating-card { padding: 24px 16px; }
}