-->

<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Roboto:wght@700;900&display=swap');

/* ============================================================
   VARIABLES
   ============================================================ */
.as-wrap {
  --bg-center:   #064c9c;
  --bg-edge:     #03122d;
  --grad-text:   linear-gradient(90deg, #00d4ff, #00e5cc 45%, #9b59b6);
  --grad-btn:    linear-gradient(90deg, #00d4ff, #9b59b6);
  --card-bg:     rgba(6, 76, 156, 0.22);
  --card-border: rgba(0, 212, 255, 0.18);
  --text-1:      #ffffff;
  --text-2:      rgba(255, 255, 255, 0.76);
  --text-3:      rgba(255, 255, 255, 0.48);
  --font:        'Montserrat', sans-serif;
  --font-em:     'Roboto', sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
.as-wrap *, .as-wrap *::before, .as-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.as-wrap {
  font-family: var(--font);
  color: var(--text-1);
  background: radial-gradient(ellipse at 50% 40%, var(--bg-center) 0%, var(--bg-edge) 68%);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.as-wrap a { text-decoration: none; color: inherit; }
.as-wrap ul { list-style: none; }
.as-wrap img { max-width: 100%; display: block; }
.as-wrap button { font-family: var(--font); cursor: pointer; border: none; outline: none; }

/* ============================================================
   UTILITIES
   ============================================================ */
.as-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.as-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 10px;
}
.as-bar {
  width: 52px;
  height: 3px;
  background: var(--grad-btn);
  border-radius: 3px;
  margin-bottom: 22px;
}

/* ============================================================
   BUTTONS — all left-aligned by default
   ============================================================ */
.as-btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 50px;
  background: var(--grad-btn);
  color: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  border: none;
  outline: none;
}
.as-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(0, 212, 255, 0.44);
  opacity: 0.93;
}


/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */
.as-section { padding: 96px 56px; }
.as-section__inner { max-width: 1200px; margin: 0 auto; }

.as-section-h {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 20px;
}
.as-section-p {
  font-size: 0.97rem;
  color: var(--text-2);
  line-height: 1.85;
  max-width: 660px;
}

/* Bullet list — corporate style, no emojis */
.as-bullet-list { margin: 22px 0 36px; }
.as-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  font-size: 0.92rem;
  color: var(--text-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.as-bullet-item:last-child { border-bottom: none; }
.as-bullet-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #9b59b6);
  flex-shrink: 0;
  margin-top: 8px;
}

/* ============================================================
   CONTACT FORM (Section 2 — appears directly below hero)
   ============================================================ */
.as-contact {
  background: rgba(3, 18, 45, 0.6);
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}
.as-contact__inner { max-width: 760px; }
.as-contact__sub {
  font-size: 0.97rem;
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 580px;
}
.as-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.as-form__group { display: flex; flex-direction: column; gap: 8px; }
.as-form__group--full { grid-column: 1 / -1; }
.as-form label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.as-form input,
.as-form textarea {
  background: rgba(6, 76, 156, 0.18);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-family: var(--font);
  font-size: 0.91rem;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  transition: border-color 0.22s, background 0.22s;
}
.as-form input::placeholder,
.as-form textarea::placeholder { color: rgba(255, 255, 255, 0.28); }
.as-form input:focus,
.as-form textarea:focus {
  border-color: rgba(0, 212, 255, 0.5);
  background: rgba(6, 76, 156, 0.28);
}
.as-form textarea { min-height: 140px; resize: vertical; }
.as-form__submit { grid-column: 1 / -1; }
.as-form__note {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 12px;
}

/* ============================================================
   FREE RESOURCE TEASER (Section 3)
   ============================================================ */
.as-resource {
  background: radial-gradient(ellipse at 50% 0%, rgba(6, 76, 156, 0.3) 0%, transparent 65%);
  border-bottom: 1px solid rgba(0, 212, 255, 0.07);
}
.as-resource__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.as-resource__mockup {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.as-resource__card {
  width: 300px;
  background: linear-gradient(148deg, #0a3a7a 0%, #03122d 100%);
  border-radius: 14px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.36), 0 0 70px rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 32px 28px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.as-resource__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-btn);
}
.as-resource__card-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 18px;
}
.as-resource__card-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.as-resource__level {
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.as-resource__level--1 { background: rgba(180,60,40,0.28); border: 1px solid rgba(180,60,40,0.38); color: #ff8066; }
.as-resource__level--2 { background: rgba(200,130,0,0.28); border: 1px solid rgba(200,130,0,0.38); color: #ffc844; }
.as-resource__level--3 { background: rgba(30,100,170,0.28); border: 1px solid rgba(30,100,170,0.38); color: #66aaff; }
.as-resource__level--4 { background: rgba(0,180,130,0.28); border: 1px solid rgba(0,180,130,0.38); color: #00e5cc; }
.as-resource__card-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
}
.as-resource__pullquote {
  font-size: 0.95rem;
  color: #00d4ff;
  line-height: 1.7;
  margin: 18px 0 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(0, 212, 255, 0.4);
}
.as-resource__benefits { margin: 18px 0 34px; }
.as-resource__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-2);
}
.as-resource__check {
  color: #00d4ff;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================================
   ABOUT TEASER (Section 4)
   ============================================================ */
.as-about {
  background: rgba(3, 18, 45, 0.55);
  border-top: 1px solid rgba(0, 212, 255, 0.07);
  border-bottom: 1px solid rgba(0, 212, 255, 0.07);
}
.as-about__grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}
.as-about__img-frame {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.18), 0 20px 60px rgba(0, 0, 0, 0.4);
}
.as-about__img-ph {
  width: 100%;
  aspect-ratio: 4/5;
  background: rgba(6, 76, 156, 0.26);
  border: 1px dashed rgba(0, 212, 255, 0.26);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.as-about__role {
  font-size: 0.82rem;
  font-weight: 600;
  color: #00d4ff;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.as-about__org {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.as-about__edu {
  font-size: 0.8rem;
  color: var(--text-3);
  line-height: 1.7;
  margin-bottom: 32px;
}
.as-about__edu strong { color: var(--text-2); font-weight: 600; }

/* ============================================================
   SPEAKING TEASER (Section 5)
   ============================================================ */
.as-speaking {
  background: radial-gradient(ellipse at 50% -10%, rgba(6, 76, 156, 0.3) 0%, transparent 60%);
}
.as-speaking__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 40px;
}
.as-speaking__card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.as-speaking__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-btn);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.as-speaking__card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}
.as-speaking__card:hover::before { opacity: 1; }
.as-speaking__venue {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 10px;
}
.as-speaking__title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}
.as-speaking__body {
  font-size: 0.86rem;
  color: var(--text-2);
  line-height: 1.75;
}

/* ============================================================
   SIGNATURE MARK (between Speaking and Footer)
   ============================================================ */
.as-signature {
  padding: 72px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(3, 18, 45, 0.7);
  border-top: 1px solid rgba(0, 212, 255, 0.08);
}
.as-signature__inner {
  text-align: center;
}
.as-signature__name {
  font-family: var(--font);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 6px;
}
.as-signature__subtitle {
  font-family: var(--font);
  font-size: clamp(0.75rem, 1.4vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 4px;
}
.as-signature__intel {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: clamp(0.75rem, 1.4vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00d4ff, #00e5cc 45%, #9b59b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.as-signature__divider {
  width: 36px;
  height: 1px;
  background: var(--grad-btn);
  margin: 18px auto;
  border-radius: 2px;
  opacity: 0.6;
}
.as-signature__tagline {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ============================================================
   FOOTER
   ============================================================ */
.as-footer {
  background: rgba(3, 18, 45, 0.97);
  border-top: 1px solid rgba(0, 212, 255, 0.1);
  padding: 64px 56px 36px;
}
.as-footer__inner { max-width: 1200px; margin: 0 auto; }
.as-footer__top {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 32px;
}
.as-footer__brand-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.as-footer__brand-desc {
  font-size: 0.83rem;
  color: var(--text-3);
  line-height: 1.8;
  max-width: 340px;
}
.as-footer__col-title {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 16px;
}
.as-footer__links { display: flex; flex-direction: column; gap: 10px; }
.as-footer__links a {
  font-size: 0.83rem;
  color: var(--text-2);
  transition: color 0.2s;
}
.as-footer__links a:hover { color: #00d4ff; }
.as-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.as-footer__copy {
  font-size: 0.74rem;
  color: var(--text-3);
  line-height: 1.8;
  max-width: 740px;
}
.as-footer__legal { display: flex; gap: 20px; flex-shrink: 0; }
.as-footer__legal a {
  font-size: 0.72rem;
  color: var(--text-3);
  transition: color 0.2s;
}
.as-footer__legal a:hover { color: #00d4ff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .as-about__grid { grid-template-columns: 1fr; gap: 40px; }
  .as-about__img-frame { display: none; }
  .as-resource__grid { grid-template-columns: 1fr; gap: 48px; }
  .as-resource__mockup { display: none; }
  /* footer is single column, no grid changes needed at this breakpoint */
}
@media (max-width: 768px) {
  .as-section { padding: 68px 20px; }
  .as-speaking__grid { grid-template-columns: 1fr; gap: 18px; }
  .as-form { grid-template-columns: 1fr; }
  .as-footer { padding: 52px 20px 28px; }
  .as-footer__bottom { flex-direction: column; }
}
</style>

<div class="as-wrap">

  <!-- ════════════════════════════════════════════════════════
       SECTION 1: CONTACT FORM
       To make this form functional, sign up at formspree.io,
       create a form, and replace action="#" with your endpoint.
       ════════════════════════════════════════════════════════ -->
  <section class="as-section as-contact" id="contact">
    <div class="as-section__inner">
      <div class="as-contact__inner">
        <span class="as-label">Connect</span>
        <div class="as-bar"></div>
        <h2 class="as-section-h">
          Start the <span class="as-grad">Conversation</span>
        </h2>
        <form class="as-form" action="#" method="POST">
          <div class="as-form__group">
            <label for="as-first">First Name</label>
            <input type="text" id="as-first" name="first_name" placeholder="Jane" required />
          </div>
          <div class="as-form__group">
            <label for="as-last">Last Name</label>
            <input type="text" id="as-last" name="last_name" placeholder="Smith" required />
          </div>
          <div class="as-form__group">
            <label for="as-email">Email Address</label>
            <input type="email" id="as-email" name="email" placeholder="jane@company.com" required />
          </div>
          <div class="as-form__group">
            <label for="as-org">Organization</label>
            <input type="text" id="as-org" name="organization" placeholder="Your organization" />
          </div>
          <div class="as-form__group as-form__group--full">
            <label for="as-msg">Message</label>
            <textarea id="as-msg" name="message" placeholder="Describe your inquiry, event, or area of collaboration..." required></textarea>
          </div>
          <div class="as-form__submit">
            <button type="submit" class="as-btn">Connect</button>
            <p class="as-form__note">Your information is kept private and will not be shared. Responses are typically sent within 48 hours.</p>
          </div>
        </form>
      </div>
    </div>
  </section>


  <!-- ════════════════════════════════════════════════════════
       SECTION 3: FREE RESOURCE TEASER
       ════════════════════════════════════════════════════════ -->
  <section class="as-section as-resource">
    <div class="as-section__inner">

      <span class="as-label">Free Resources</span>
      <div class="as-bar"></div>
      <p class="as-section-p" style="margin-bottom: 32px;">
        Frameworks, tools, and insights on Learning Ecosystem Intelligence, AI-powered enablement, and enterprise L&amp;D strategy — available on the Free Resources page.
      </p>
      <a href="/free-resources" class="as-btn">Explore Free Resources</a>

    </div>
  </section>


  <!-- ════════════════════════════════════════════════════════
       SECTION 4: ABOUT TEASER
       Replace the image placeholder with an <img> tag pointing
       to your professional photo URL in Squarespace File Manager.
       ════════════════════════════════════════════════════════ -->
  <section class="as-section as-about">
    <div class="as-section__inner">
      <div class="as-about__grid">

        <!-- Left column: professional photo -->
        <div>
          <div class="as-about__img-frame">
            <!--
              Replace this placeholder with your photo:
              <img src="[YOUR-PHOTO-URL]" alt="Andrea Scroggy, Chief Learning Officer and keynote speaker on Learning Ecosystem Intelligence" />
            -->
            <div class="as-about__img-ph">Add professional photo</div>
          </div>
        </div>

        <!-- Right column: bio -->
        <div>
          <span class="as-label">About Andrea</span>
          <div class="as-bar"></div>
          <p class="as-section-p" style="margin-bottom: 22px;">
            Andrea Scroggy is a Learning &amp; Development strategist with over 15 years of experience spanning global development, SaaS enablement, and highly regulated industries. She brings a cross-functional perspective to workplace learning, challenging L&amp;D leaders to move beyond content delivery and model the feedback-rich cultures of continuous improvement they seek to build.
          </p>
          <p class="as-section-p" style="margin-bottom: 36px;">
            Andrea specializes in data-driven, AI-powered intelligent learning ecosystems that bridge emerging technology with human-centered design to deliver measurable business impact. She is driven by one core belief: that learning changes what people can do, and by extension, what organizations can become.
          </p>
          <a href="/about" class="as-btn">Learn More</a>
        </div>

      </div>
    </div>
  </section>


  <!-- ════════════════════════════════════════════════════════
       SECTION 5: SPEAKING TEASER
       ════════════════════════════════════════════════════════ -->
  <section class="as-section as-speaking">
    <div class="as-section__inner">

      <span class="as-label">Speaking and Keynotes</span>
      <div class="as-bar"></div>
      <h2 class="as-section-h">
        Speaking on <span class="as-grad">Learning Ecosystem Intelligence</span>
      </h2>

      <!--
        ════════════════════════════════════════════════════
        HOW TO ADD A SPEAKING ENGAGEMENT:
        Copy one of the cards below and fill in your details.
        See the separate file "speaking-template-guide.txt"
        for full instructions and field descriptions.
        ════════════════════════════════════════════════════
      -->
      <div class="as-speaking__grid">

        <!-- SPEAKING CARD — copy and repeat this block for each engagement -->
        <div class="as-speaking__card">
          <div class="as-speaking__venue">[EVENT NAME] · [CITY, STATE] · [YEAR]</div>
          <div class="as-speaking__title">[SESSION TITLE]</div>
          <p class="as-speaking__body">
            [2-3 sentence description of the session: what the audience learned, the key framework or concept covered, and the takeaway.]
          </p>
        </div>

        <!-- SPEAKING CARD 2 -->
        <div class="as-speaking__card">
          <div class="as-speaking__venue">[EVENT NAME] · [CITY, STATE] · [YEAR]</div>
          <div class="as-speaking__title">[SESSION TITLE]</div>
          <p class="as-speaking__body">
            [2-3 sentence description of the session: what the audience learned, the key framework or concept covered, and the takeaway.]
          </p>
        </div>

        <!-- SPEAKING CARD 3 -->
        <div class="as-speaking__card">
          <div class="as-speaking__venue">[EVENT NAME] · [CITY, STATE] · [YEAR]</div>
          <div class="as-speaking__title">[SESSION TITLE]</div>
          <p class="as-speaking__body">
            [2-3 sentence description of the session: what the audience learned, the key framework or concept covered, and the takeaway.]
          </p>
        </div>

      </div>

      <a href="/speaking" class="as-btn">View All Speaking Topics</a>

    </div>
  </section>


  <!-- ════════════════════════════════════════════════════════
       SIGNATURE MARK
       ════════════════════════════════════════════════════════ -->
  <div class="as-signature">
    <div class="as-signature__inner">
      <div class="as-signature__name">Andrea Scroggy</div>
      <div>
        <span class="as-signature__subtitle">Learning Ecosystem&nbsp;</span><span class="as-signature__intel">Intelligence</span>
      </div>
      <div class="as-signature__divider"></div>
      <div class="as-signature__tagline">Data-driven strategy &nbsp;&middot;&nbsp; Predictive enablement &nbsp;&middot;&nbsp; AI-powered outcomes</div>
    </div>
  </div>


  <!-- ════════════════════════════════════════════════════════
       SECTION 6: FOOTER WITH COPYRIGHT AND TERMS
       ════════════════════════════════════════════════════════ -->
  <footer class="as-footer">
    <div class="as-footer__inner">

      <div class="as-footer__bottom" style="padding-top: 48px;">
        <p class="as-footer__copy">
          &copy; 2026 Andrea Scroggy. All rights reserved. The content, frameworks, methodologies, strategic models, and intellectual property presented on this website, including but not limited to the Learning Ecosystem Intelligence Framework, the L&amp;D Maturity Diagnostic, speaking materials, articles, and proprietary tools, are the original work of Andrea Scroggy and are protected under applicable United States and international copyright and intellectual property laws. No portion of this website or its content may be reproduced, distributed, transmitted, displayed, published, or broadcast in any form without the prior express written permission of Andrea Scroggy. Unauthorized use constitutes copyright infringement and may result in legal action.
        </p>
        <div class="as-footer__legal">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Use</a>
        </div>
      </div>

    </div>
  </footer>

</div><!-- end .as-wrap -->