/* =========================================================================
   CreativeSolar – TAO landing
   Base styles ported verbatim from the Claude Design source (head <style>).
   The responsive rules below intentionally target inline styles via
   [style*="…"] selectors, so the markup keeps its original inline styles.
   ========================================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes revealUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes drawLine{to{stroke-dashoffset:0;}}
@keyframes glowPulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:.9;transform:scale(1.1);}}

.cta-arr{display:inline-block;transition:transform .28s cubic-bezier(.22,.61,.36,1);}
a:hover .cta-arr, button:hover .cta-arr{transform:translateX(5px);}

details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}
details[open] .faq-plus{transform:rotate(45deg);}

/* Scroll reveal — pure CSS via view timeline so it survives re-renders.
   Only hides when supported; falls back to fully visible otherwise. */
@supports (animation-timeline: view()){
  [data-reveal]{animation:revealUp linear both;animation-timeline:view();animation-range:entry 2% entry 32%;}
  [data-reveal-fade]{animation:fadeIn linear both;animation-timeline:view();animation-range:entry 0% entry 28%;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;}html{scroll-behavior:auto;}[data-reveal]{opacity:1!important;transform:none!important;}[data-reveal-fade]{opacity:1!important;}}

/* ---------- Responsive / mobil ---------- */
@media (max-width:900px){
  .r-5{grid-template-columns:repeat(2,1fr)!important;}
  .r-4{grid-template-columns:repeat(2,1fr)!important;}
}
@media (max-width:720px){
  .r-hero,.r-2to1,.r-3to1,.r-cta,.r-4,.r-5{grid-template-columns:1fr!important;}
  .r-hero{gap:32px!important;}
  .r-3to1>article{transform:none!important;}
  .r-cta{padding:28px!important;gap:26px!important;}
  .r-navlinks a:not(:last-child){display:none!important;}
  .r-herostats{flex-wrap:wrap!important;gap:18px 26px!important;}
  .r-herostats>div[style*="width:1px"]{display:none!important;}
  [style*="padding:0 34px"]{padding-left:18px!important;padding-right:18px!important;}
  [style*="padding:9px 34px"]{padding-left:18px!important;padding-right:18px!important;}
  [style*="padding:70px 34px 84px"]{padding:40px 18px 52px!important;}
  [style*="padding:90px 0"]{padding-top:54px!important;padding-bottom:54px!important;}
  [style*="padding:84px 0"]{padding-top:54px!important;padding-bottom:54px!important;}
}
@media (max-width:480px){
  .r-4,.r-5{grid-template-columns:1fr!important;}
}

/* =========================================================================
   Interactive states — ported from the design's style-hover / style-focus
   attributes (inline styles can't express :hover/:focus). Base appearance
   and transitions stay inline on the elements; these add the hover/focus
   deltas. Class names are attached in index.html.
   ========================================================================= */
.nav-link:hover{color:#141A22;}
.btn-nav-cta:hover{background:#C2510A;transform:translateY(-1px);}

.btn-primary:hover{background:#C2510A;transform:translateY(-2px);}
.btn-ghost:hover{border-color:#141A22;transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(20,30,60,0.3);}
.btn-featured:hover{background:#fff;color:#0E1A2B;transform:translateY(-2px);}

.card-pkg:hover{transform:translateY(-6px);box-shadow:0 26px 52px -32px rgba(20,30,60,0.34);border-color:#E0D6C8;}
.card-pkg--blue:hover{transform:translateY(-6px);box-shadow:0 26px 52px -32px rgba(20,30,60,0.34);border-color:#CFD9EC;}
.card-featured:hover{transform:translateY(-18px);box-shadow:0 48px 90px -38px rgba(234,106,12,0.5),0 48px 84px -38px rgba(14,26,43,0.78);}

.card-step:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(20,30,60,0.3);border-color:#F2D4BB;}
.card-benefit:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(20,30,60,0.32);border-color:#E0D6C8;}
.card-benefit--blue:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(20,30,60,0.32);border-color:#CFD9EC;}
.card-roi:hover{transform:translateY(-4px);box-shadow:0 22px 46px -30px rgba(20,30,60,0.3);border-color:#E0D6C8;}

.faq:hover{border-color:#E0D6C8;box-shadow:0 16px 34px -26px rgba(20,30,60,0.3);}

.field:focus{outline:none;border-color:#EA6A0C;box-shadow:0 0 0 3px rgba(234,106,12,0.13);}

.contact-link--orange:hover{color:#F6A06A;}
.contact-link--blue:hover{color:#A9C2F5;}

/* Make the submit button itself the click target (its inner label + arrow
   spans don't capture clicks), so GTM's gtm.element is always the button
   carrying data-gtm-click — stable regardless of where inside you click. */
#submitBtn span{pointer-events:none;}

/* Skip-to-content link — visually hidden until keyboard focus (WCAG 2.4.1). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#EA6A0C;color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:14px;text-decoration:none;}
.skip-link:focus{left:0;}

/* Calculator package toggle buttons get their colours from JS (selected =
   orange fill / white text; unselected = white / ink). A subtle hover only
   on the unselected ones. */
.pkg-btn[aria-pressed="false"]:hover{border-color:#EA6A0C!important;}