/* Page-specific CSS for home — extracted verbatim from the
   approved Aura One preview. See css/shared.css for sitewide rules. */

h1,h2,h3,.statement .headline,.statement .close-line{font-family:var(--display);}

.btn-white{
    background:var(--white);
    color:var(--black);
    border:1.5px solid var(--white);
    box-shadow:0 10px 28px -8px rgba(0,0,0,.4);
  }

.btn-white:hover{background:var(--gray-bg);transform:translateY(-1px);}

/* ---------- Hero ---------- */
  .hero{
    margin-top:-72px;
    padding:112px 0 0;
    position:relative;
    background:var(--white);
  }

.hero .wrap{max-width:1240px;}

/* Approved P2 "Aurora Horizon" hero treatment. */
.hero{
    isolation:isolate;
    overflow:hidden;
    background:
      radial-gradient(ellipse 54% 30% at 4% 88%, rgba(126,103,217,.25), transparent 76%),
      radial-gradient(ellipse 62% 34% at 48% 90%, rgba(78,124,222,.22), transparent 76%),
      radial-gradient(ellipse 56% 31% at 98% 88%, rgba(68,179,199,.22), transparent 76%),
      linear-gradient(180deg, #fdfcfa 0%, #fdfcfa 48%, #f8faff 70%, #edf7fb 100%);
  }

.hero::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:-8%;
    right:-8%;
    bottom:-9%;
    height:38%;
    background:linear-gradient(90deg,
      rgba(126,103,217,.14) 0%,
      rgba(78,124,222,.18) 46%,
      rgba(68,179,199,.15) 100%);
    filter:blur(42px);
    border-radius:50% 50% 0 0;
  }

.hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    bottom:10.5%;
    height:1px;
    background:linear-gradient(90deg,
      transparent 4%,
      rgba(126,103,217,.18) 22%,
      rgba(78,124,222,.24) 50%,
      rgba(68,179,199,.18) 78%,
      transparent 96%);
    box-shadow:0 10px 30px rgba(78,124,222,.11);
  }

.hero-grid{position:relative;z-index:1;}

.hero-visual svg{
    filter:drop-shadow(0 34px 58px rgba(28,26,23,.16));
  }

.hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:38px;
    align-items:center;
    padding:64px 0 66px;
  }

.hero-copy{max-width:820px;margin:0 auto;text-align:center;}

.hero .eyebrow{margin-bottom:18px;}

.hero h1{
    font-family:var(--cabin);
    font-weight:600;
    font-size:clamp(42px,5.4vw,64px);
    line-height:1.16;
    letter-spacing:0;
    margin:0 0 22px;
    color:var(--black);
  }

@media(min-width:1280px){
    .hero h1{
      font-size:58px;
      white-space:nowrap;
    }
  }

.hero .sub{
    font-size:18px;
    line-height:1.6;
    color:var(--gray-text);
    max-width:670px;
    margin:0 auto 36px;
  }

.hero-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}

/* ---------- Hero board visual ---------- */
  .hero-visual{position:relative;width:min(100%,520px);margin:0 auto;isolation:isolate;}

.hero-visual svg{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 22px 34px rgba(46,80,154,.13));
    -webkit-box-reflect:below 3px linear-gradient(
      to bottom,
      rgba(0,0,0,.17) 0%,
      rgba(0,0,0,.07) 22%,
      transparent 48%
    );
  }

.hero-visual::after{
    content:"";
    position:absolute;
    z-index:0;
    left:7%;
    right:7%;
    bottom:-30px;
    height:54px;
    border-radius:50%;
    background:linear-gradient(90deg,
      rgba(126,103,217,.12),
      rgba(78,124,222,.18) 48%,
      rgba(68,179,199,.12));
    filter:blur(18px);
  }

.hero-visual-caption{
    display:none;
    justify-content:space-between;
    max-width:92%;
    margin:14px auto 0;
    font-size:12px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gray-text-2);
  }

/* ---------- Getting the Most Out of Wrike ---------- */
  .value-prop{padding:110px 0;background:var(--gray-bg);}

.value-prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

.value-prop-copy h2{
    font-weight:700;
    font-size:clamp(28px,3.4vw,38px);
    letter-spacing:-.02em;
    line-height:1.18;
    margin:14px 0 22px;
  }

.value-prop-copy p{font-size:17px;line-height:1.7;color:var(--gray-text);margin:0 0 18px;}

.value-prop-copy p:last-child{margin-bottom:0;}

.value-prop-copy strong{color:var(--black);}

.vp-window{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(28,26,23,.18);}

.vp-titlebar{display:flex;gap:6px;padding:14px 16px;background:var(--gray-bg-2);border-bottom:1px solid var(--border);}

.vp-titlebar span{width:9px;height:9px;border-radius:50%;background:var(--border);}

.vp-body{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:32px 24px;}

.vp-col{display:flex;flex-direction:column;gap:10px;}

.vp-col-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--black);margin-bottom:2px;}

.vp-col-label.muted{color:var(--gray-text-2);}

.vp-tag{
    font-size:13.5px;
    font-weight:600;
    padding:8px 12px;
    border-radius:8px;
    background:var(--tc, var(--gray-text-2));
    color:var(--white);
    opacity:.92;
  }

.vp-tag.muted{background:var(--gray-bg-2);color:var(--gray-text-2);border:1px solid var(--border);opacity:1;}

.vp-arrow{display:flex;align-items:center;justify-content:center;}

/* ---------- Methodology ---------- */
  .methodology{padding:120px 0;background:var(--white);}

.section-head{max-width:640px;margin:0 0 56px;}

.workflow{position:relative;}

.workflow-steps{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    position:relative;
  }

.workflow-rail{
    position:absolute;
    top:17px;
    left:10%;right:10%;
    height:2px;
    background:var(--border);
    z-index:0;
  }

.workflow-step{position:relative;z-index:1;padding:0 22px 0 0;}

.workflow-step:last-child{padding-right:0;}

.workflow-node{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    font-size:13px;
    font-weight:700;
    color:var(--white);
    letter-spacing:.02em;
    background:var(--wc);
    box-shadow:0 0 0 6px var(--white);
    margin-bottom:24px;
    position:relative;
  }

.workflow-step h3{font-size:20px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em;}

.workflow-step p{font-size:15.5px;line-height:1.6;color:var(--gray-text);margin:0;}

/* ---------- Services ---------- */
  .services{padding:120px 0;background:var(--gray-bg);}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:auto auto auto;
    gap:20px;
  }

.service-card{
    background:var(--white);
    border-radius:20px;
    padding:32px 28px;
    box-shadow:0 2px 6px rgba(0,0,0,.03), 0 24px 48px -28px rgba(0,0,0,.16);
    border-top:4px solid var(--blue);
    display:flex;
    flex-direction:column;
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
  }

.service-card:hover{
    transform:translateY(-5px) !important;
    box-shadow:0 4px 10px rgba(0,0,0,.04), 0 32px 56px -28px rgba(0,0,0,.22);
  }

.service-card .tag{
    display:inline-block;
    align-self:flex-start;
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:5px 12px;
    border-radius:100px;
    margin-bottom:18px;
  }

.service-card h3{font-weight:700;margin:0 0 12px;letter-spacing:-.01em;}

.service-card p{line-height:1.65;color:var(--gray-text);margin:0;}

.service-card .mini-node{
    position:absolute;
    top:24px;right:24px;
    width:26px;height:26px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;color:var(--white);
    background:var(--nc);
    opacity:.9;
  }

.service-card.featured{
    grid-column:1/3;
    grid-row:1/3;
    border-top-color:var(--blue);
    justify-content:space-between;
    padding:36px 38px 40px;
    background:#f5f8fc;
  }

.service-card.featured .tag{background:rgba(46,107,179,.12);color:var(--blue);}

.service-card.featured h3{font-size:28px;letter-spacing:-.02em;}

.service-card.featured p{font-size:17px;max-width:38ch;}

.service-card.featured .num{
    align-self:flex-end;
    font-size:96px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.04em;
    color:rgba(46,107,179,.1);
    margin:0;
  }

.service-card.secondary{
    grid-column:3/5;
    grid-row:1;
    border-top-color:var(--orange);
    flex-direction:row;
    align-items:center;
    gap:22px;
    padding:28px 56px 28px 30px;
  }

.service-card.secondary .tag{background:rgba(210,105,30,.12);color:var(--orange);margin-bottom:0;}

.service-card.secondary .body{display:flex;flex-direction:column;gap:6px;}

.service-card.secondary h3{font-size:20px;}

.service-card.secondary p{font-size:15px;}

.service-card.compact{
    grid-column:span 1;
    grid-row:2;
    border-top-color:var(--purple);
    padding:26px 24px 26px 24px;
  }

.service-card.compact h3{padding-right:34px;}

.service-card.compact:nth-of-type(3){border-top-color:var(--purple);}

.service-card.compact:nth-of-type(4){border-top-color:var(--teal);}

.service-card.compact h3{font-size:17px;}

.service-card.compact p{font-size:14.5px;}

.service-card.banner{
    grid-column:1/5;
    grid-row:3;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:0;
    border-left:4px solid var(--gold);
    background:#faf6ec;
    padding-left:48px;
  }

.service-card.banner .body{max-width:60ch;}

.service-card.banner h3{font-size:19px;margin-bottom:6px;}

.service-card.banner p{font-size:15px;}

.service-card.banner .tag{background:rgba(184,134,11,.14);color:var(--gold);margin:0;flex:none;}

.service-card.banner .mini-node{top:50%;left:16px;right:auto;transform:translateY(-50%);}

.services-cta{text-align:center;margin-top:48px;}

@media(max-width:900px){
    .service-card.featured,.service-card.secondary,.service-card.compact,.service-card.banner{grid-column:1/-1;grid-row:auto;}
    .service-card.secondary,.service-card.banner{flex-direction:column;align-items:flex-start;}
    .pillars{grid-template-columns:1fr;gap:28px;}
  }

/* ---------- Partnership ---------- */
  .partnership{padding:110px 0;background:var(--white);}

.partnership-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

.partnership-copy h2{font-weight:700;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.02em;line-height:1.18;margin:14px 0 22px;}

.partnership-copy p{font-size:17px;line-height:1.7;color:var(--gray-text);margin:0 0 18px;}

.partnership-copy .btn-outline{margin-top:8px;}

.pw-window{background:var(--gray-bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(28,26,23,.18);}

.pw-titlebar{display:flex;gap:6px;padding:14px 16px;background:var(--gray-bg-2);border-bottom:1px solid var(--border);}

.pw-titlebar span{width:9px;height:9px;border-radius:50%;background:var(--border);}

.pw-body{display:flex;flex-direction:column;padding:38px 34px;}

.pw-node{display:flex;align-items:center;gap:16px;}

.pw-dot{width:14px;height:14px;border-radius:50%;background:var(--pc);flex:none;box-shadow:0 0 0 4px var(--gray-bg);}

.pw-label{font-size:15.5px;font-weight:700;letter-spacing:-.005em;color:var(--black);}

.pw-sub{font-size:13.5px;color:var(--gray-text-2);margin-top:2px;}

.pw-connector{width:2px;height:30px;margin-left:6px;background:var(--border);}

/* ---------- Integrations ---------- */
  .integrations{padding:120px 0;background:var(--white);}

.integrations .section-head{margin-bottom:56px;}

.integration-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }

.integration-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:32px 16px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:16px;
    transition:transform .2s ease, box-shadow .2s ease;
  }

.integration-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(0,0,0,.2);}

.integration-card .logo-box{
    height:44px;
    width:100%;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

.integration-card img{
    height:100%;
    width:auto;
    max-width:120px;
    object-fit:contain;
  }

.integration-card span{font-size:14px;font-weight:600;color:var(--gray-text);}

.integration-card.more{color:var(--gray-text);}

.integration-card.more span{font-size:16px;font-weight:700;color:var(--blue);}

.integration-row.mobile-fallback{display:none;}

.hub-diagram{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto;}

.hub-lines{position:absolute;inset:0;width:100%;height:100%;}

.hub-center{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:132px;height:132px;
    border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--white);
    border:2px solid var(--border);
    box-shadow:0 12px 28px -14px rgba(28,26,23,.25);
    text-align:center;
    padding:10px;
  }

.hub-center .hc-label1{font-size:13px;font-weight:700;color:var(--black);letter-spacing:-.01em;}

.hub-center .hc-label2{font-size:11.5px;color:var(--gray-text-2);margin-top:2px;}

.hub-node{
    position:absolute;
    transform:translate(-50%,-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;
  }

.hub-node .logo-box{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -10px rgba(0,0,0,.18);
    padding:12px;
    transition:transform .2s ease, box-shadow .2s ease;
  }

.hub-node:hover .logo-box{transform:translateY(-3px) !important;box-shadow:0 14px 24px -12px rgba(0,0,0,.24);}

.hub-node img{max-width:100%;max-height:100%;object-fit:contain;}

.hub-node span{font-size:12.5px;font-weight:600;color:var(--gray-text);white-space:nowrap;}

.integrations-note{text-align:center;font-size:14px;color:var(--gray-text-2);margin-top:36px;}

.integrations-disclaimer{text-align:center;font-size:12.5px;color:var(--gray-text-2);margin-top:14px;max-width:56ch;margin-left:auto;margin-right:auto;line-height:1.6;}

/* ---------- About ---------- */
  .about{padding:120px 0;background:var(--gray-bg);}

.about-grid{
    display:grid;
    grid-template-columns:minmax(0,360px) 1fr;
    gap:72px;
    align-items:center;
  }

.about-photo{
    border-radius:20px;
    overflow:hidden;
    background:var(--white);
    aspect-ratio:4/5;
    box-shadow:0 30px 60px -20px rgba(46,107,179,.35), 0 10px 30px -10px rgba(123,79,166,.25);
  }

.about-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}

.about-copy .eyebrow{margin-bottom:16px;}

.about-copy h2{
    font-weight:800;
    font-size:clamp(28px,3.4vw,38px);
    letter-spacing:-.02em;
    line-height:1.2;
    margin:0 0 22px;
  }

.about-copy p{font-size:18px;line-height:1.75;color:var(--gray-text);margin:0 0 18px;}

.about-copy p:last-child{margin-bottom:0;}

.about-copy .credit{font-weight:700;color:var(--blue);}

.about-photo-wrap{position:relative;}

.about-badge{
    position:absolute;
    left:20px;bottom:20px;
    display:inline-flex;align-items:center;gap:8px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:100px;
    padding:9px 16px 9px 11px;
    font-size:12.5px;font-weight:700;color:var(--black);
    box-shadow:0 14px 28px -14px rgba(28,26,23,.35);
  }

.about-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;}

.about-name{font-size:15.5px;font-weight:700;color:var(--black);margin:-6px 0 20px;letter-spacing:-.005em;}

.about-name span{font-weight:500;color:var(--gray-text-2);}

.about-linkedin{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:15px;font-weight:700;color:var(--blue);text-decoration:none;}

.about-linkedin:hover{text-decoration:underline;}

/* ---------- Testimonial ---------- */
  .testimonial{padding:160px 0;background:var(--white);text-align:center;}

.testimonial .mark{
    font-family:Georgia,serif;
    font-size:104px;
    line-height:1;
    color:var(--purple);
    opacity:.4;
    margin-bottom:4px;
  }

.testimonial blockquote{
    margin:0 auto 40px;
    max-width:860px;
    font-size:clamp(24px,2.9vw,36px);
    line-height:1.45;
    font-weight:600;
    letter-spacing:-.015em;
    color:var(--black);
  }

.testimonial .attrib-rule{width:44px;height:3px;border-radius:100px;background:var(--purple);margin:0 auto 20px;opacity:.5;}

.testimonial .attrib{font-size:15.5px;color:var(--gray-text);}

.testimonial .attrib strong{display:block;color:var(--black);font-size:17px;font-weight:700;margin-bottom:3px;}

/* ---------- FAQ ---------- */
  .faq{padding:120px 0;background:var(--gray-bg);}

.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--border);}

.faq-list details{border-bottom:1px solid var(--border);padding:26px 0;}

.faq-list summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:17px;
    font-weight:600;
    color:var(--black);
  }

.faq-list summary::-webkit-details-marker{display:none;}

.faq-list summary .icon{
    flex:none;
    width:22px;height:22px;
    border-radius:50%;
    border:1.5px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
    color:var(--gray-text);
    margin-left:20px;
  }

.faq-list details[open] summary .icon{background:var(--black);color:var(--white);border-color:transparent;}

.faq-list details[open] summary .icon:before{content:"–";}

.faq-list summary .icon:before{content:"+";}

.faq-list p{font-size:16px;line-height:1.7;color:var(--gray-text);margin:16px 0 0;max-width:680px;}

/* ---------- Final CTA ---------- */
  .final-cta{
    position:relative;
    color:var(--black);
    text-align:center;
    padding:100px 0 130px;
    background:var(--white);
  }

.final-cta p{font-size:18px;color:var(--gray-text);margin:0 0 40px;max-width:520px;margin-left:auto;margin-right:auto;}

@media(max-width:900px){
    .wrap{padding:0 24px;}
    .nav-inner{padding:14px 24px;}
    .nav-links{gap:20px;}
    .hero-grid{gap:34px;padding:36px 0 48px;}
    .value-prop-grid{grid-template-columns:1fr;gap:36px;}
    .vp-body{grid-template-columns:1fr;}
    .vp-arrow{transform:rotate(90deg);padding:4px 0;}
    .partnership-grid{grid-template-columns:1fr;gap:36px;}
    .workflow-steps{grid-template-columns:1fr;gap:32px;}
    .workflow-rail{top:0;bottom:0;left:17px;right:auto;width:2px;height:auto;background:var(--border);}
    .workflow-step{padding:0 0 0 52px;}
    .workflow-node{position:absolute;left:0;top:0;margin-bottom:0;}
    .service-grid{grid-template-columns:1fr;}
    .integration-row{grid-template-columns:1fr 1fr;}
    .hub-diagram{display:none;}
    .integration-row.mobile-fallback{display:grid;}
    .about-grid{grid-template-columns:1fr;gap:36px;}
    .about-photo-wrap{max-width:300px;margin:0 auto;}
    .footer-top{grid-template-columns:1fr 1fr;gap:32px 24px;}
    .footer-brand{grid-column:1/-1;margin-bottom:8px;}
    .final-cta{padding:72px 0 96px;}
    .cta-panel{padding:60px 32px;border-radius:22px;}
    .hero::before{left:-20%;right:-20%;height:32%;filter:blur(30px);}
    .hero::after{bottom:8%;}
  }

@media(max-width:560px){
    .footer-top{grid-template-columns:1fr;}
    .footer-brand{grid-column:auto;}
    .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
    .cta-panel{padding:48px 24px;border-radius:18px;}
  }

.reveal-group.in-view .reveal-item:nth-child(4){transition-delay:.24s;}

.reveal-group.in-view .reveal-item:nth-child(5){transition-delay:.31s;}

.reveal-group.in-view .reveal-item:nth-child(6){transition-delay:.38s;}

.reveal-group.in-view .reveal-item:nth-child(7){transition-delay:.45s;}

.workflow-rail{transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1);transform:scaleX(0);}

.workflow.in-view .workflow-rail{transform:scaleX(1);}

.hub-lines{opacity:0;transition:opacity .8s ease;}

.hub-diagram.in-view .hub-lines{opacity:1;}

@media(max-width:900px){
    .workflow-rail{transform:scaleY(0);transform-origin:top center;}
    .workflow.in-view .workflow-rail{transform:scaleY(1);}
  }