<?php
// Call like: include_once 'head.php'; at top of every page
// $pageTitle is set before include
// Start session before any output
if (session_status() === PHP_SESSION_NONE) session_start();
// ob_start() allows header() calls after HTML has started outputting
if (ob_get_level() === 0) ob_start();
$pageTitle = $pageTitle ?? 'Stiles Energy LPG';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title><?= htmlspecialchars($pageTitle) ?> — STILES ENERGY LPG</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
<style>
/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#f8f9fb;color:#0f172a;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#f97316}

/* ── Utility classes ── */
.hidden{display:none!important}

/* ── Buttons ── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff!important;padding:.75rem 1.75rem;border-radius:.75rem;font-weight:700;font-size:.925rem;border:none;cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(249,115,22,.35);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{background:linear-gradient(135deg,#ea580c,#c2410c);transform:translateY(-2px);box-shadow:0 8px 28px rgba(249,115,22,.45)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:#f97316;padding:.75rem 1.75rem;border-radius:.75rem;font-weight:700;font-size:.925rem;border:2px solid #f97316;cursor:pointer;text-decoration:none;transition:all .2s}
.btn-outline:hover{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(249,115,22,.35);transform:translateY(-1px)}

/* ── Inputs ── */
.input-field{width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:.75rem;padding:.8rem 1rem;color:#0f172a;outline:none;font-size:.925rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.input-field::placeholder{color:#94a3b8}
.input-field:focus{border-color:#f97316;background:#fff;box-shadow:0 0 0 4px rgba(249,115,22,.1)}

/* ── Nav ── */
.nav-link{color:#475569;font-weight:600;font-size:.9rem;text-decoration:none;position:relative;padding-bottom:4px;transition:color .2s}
.nav-link::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#f97316,#f59e0b);border-radius:2px;transition:width .25s}
.nav-link:hover{color:#f97316}
.nav-link:hover::after{width:100%}
.nav-link.active{color:#f97316}
.nav-link.active::after{width:100%}

/* ── Footer links ── */
.footer-link{display:block;color:#64748b;font-size:.875rem;margin-bottom:.5rem;transition:color .2s;text-decoration:none}
.footer-link:hover{color:#f97316}
.footer-contact-link{display:flex;align-items:center;gap:.6rem;color:#64748b;font-size:.875rem;text-decoration:none;transition:color .2s}
.footer-contact-link:hover{color:#f97316}
.footer-bottom-link{color:#475569;font-size:.8rem;text-decoration:none;font-weight:500;transition:color .2s}
.footer-bottom-link:hover{color:#f97316}

/* ── Card hover ── */
.card-hover{transition:transform .25s,box-shadow .25s,border-color .25s}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(249,115,22,.14),0 4px 12px rgba(0,0,0,.06);border-color:rgba(249,115,22,.35)!important}

/* ── Responsive ── */
@media(min-width:768px){.hidden-desktop{display:none!important}.show-desktop{display:flex!important}}
@media(max-width:767px){.hidden-mobile{display:none!important}.show-mobile{display:flex!important}}

/* ── Animations ── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,22px) scale(1.04)}}
.fade-in{animation:fadeIn .6s ease both}
.spin{animation:spin .8s linear infinite;display:inline-block}

/* ── Scroll-triggered animations ── */
.anim-fade-up{opacity:0;transform:translateY(36px);transition:opacity .7s cubic-bezier(.22,.68,0,1.1),transform .7s cubic-bezier(.22,.68,0,1.1)}
.anim-fade-left{opacity:0;transform:translateX(-36px);transition:opacity .7s cubic-bezier(.22,.68,0,1.1),transform .7s cubic-bezier(.22,.68,0,1.1)}
.anim-fade-right{opacity:0;transform:translateX(36px);transition:opacity .7s cubic-bezier(.22,.68,0,1.1),transform .7s cubic-bezier(.22,.68,0,1.1)}
.anim-scale{opacity:0;transform:scale(.93);transition:opacity .6s ease,transform .6s ease}
.anim-visible{opacity:1!important;transform:none!important}

/* ── Alert / flash ── */
.alert{padding:.85rem 1.1rem;border-radius:12px;font-size:.875rem;font-weight:600;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}
.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#2563eb}
</style>
</head>
<body>
