.text-solar { background: linear-gradient(95deg,#f59e0b 0%,#d97706 40%,#059669 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .dark .text-solar { background-image: linear-gradient(95deg,#fde68a 0%,#fbbf24 40%,#34d399 100%); }
    .bg-grid { background-image: linear-gradient(rgba(10,17,34,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(10,17,34,.06) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
    .dark .bg-grid { background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); }
    .sun-spin { transform-origin: 90px 80px; animation: spin 40s linear infinite; }
    .ray { stroke-dasharray: 6 10; animation: flow 1.2s linear infinite; }
    @keyframes flow { to { stroke-dashoffset: -32; } }
    @keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
    .floaty { animation: floaty 5s ease-in-out infinite; }
    .floaty-2 { animation: floaty 6s ease-in-out infinite .8s; }

    /* Diagram */
    .dg-node rect { fill: #f8fafc; stroke: #e2e8f0; stroke-width: 1.5; transition: all .3s; }
    .dark .dg-node rect { fill: #111a30; stroke: #26334f; }
    .dg-node.hl rect, .dark .dg-node.hl rect { fill: rgba(251,191,36,.15); stroke: #f59e0b; stroke-width: 2.5; }
    .dg-node text { font: 600 13px "Plus Jakarta Sans", sans-serif; fill: #0f172a; }
    .dark .dg-node text { fill: #e2e8f0; }
    .dg-small { font: 500 11px "Plus Jakarta Sans", sans-serif; fill: #64748b; }
    .dark .dg-small { fill: #94a3b8; }
    .dg-line { stroke: #fbbf24; stroke-width: 3; fill: none; stroke-dasharray: 8 8; animation: flow 1s linear infinite; opacity: .2; transition: opacity .3s; }
    .dg-line.hl { opacity: 1; }

    .step.active { border-color: #f59e0b; background: rgba(251,191,36,.1); }
    .step.active .step-num { background: linear-gradient(135deg,#fde68a,#fbbf24); color: #0a1122; }

    summary::-webkit-details-marker { display: none; }
    details[open] .faq-icon { transform: rotate(45deg); background: #fbbf24; color: #0a1122; }

    input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: linear-gradient(90deg,#fbbf24 var(--p,50%), rgba(148,163,184,.25) var(--p,50%)); outline: none; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid #fbbf24; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
    input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid #fbbf24; cursor: pointer; }

    .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    /* ajaxformclass / formClass.js feedback (no Bootstrap on this page) */
    .alert { padding: .75rem 1rem; border-radius: .75rem; font-weight: 600; text-align: center; position: relative; }
    .alert .close { position: absolute; top: 0; right: .5rem; text-decoration: none; color: inherit; font-size: 1.1rem; line-height: 1; }
    .alert-info { background: rgba(14,165,233,.12); color: #0369a1; }
    .alert-success { background: rgba(16,185,129,.15); color: #047857; }
    .alert-danger { background: rgba(239,68,68,.15); color: #b91c1c; }
    .form-control.box-error, .form-control.is-invalid { border-color: #ef4444 !important; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .reveal { opacity: 1; transform: none; }
    }