/* Otematik home — editorial layout inspired by premium product sites */

.hero {
    min-height: 0;
    padding-top: clamp(28px, 3vw, 44px);
    padding-bottom: clamp(44px, 4vw, 64px);
}

.hero-content {
    max-width: 1160px;
}

.hero h1 {
    font-size: clamp(42px, 4.25vw, 64px);
    line-height: 1.08;
    letter-spacing: -.058em;
    margin-bottom: 16px;
}

.hero .hero-description {
    max-width: 760px;
    margin: 0 auto 22px;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.7;
    color: #5d6b83;
}

.hero-finder {max-width:920px;margin:0 auto;padding:clamp(18px,2.5vw,28px);border:1px solid #e3dcf2;border-radius:24px;background:#fff;box-shadow:0 18px 48px #2820440a;text-align:left}
.hero-finder-heading {margin-bottom:16px}
.hero-finder-badge {display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;color:#633ad5;font-size:12px;font-weight:750;letter-spacing:.07em}
.hero-finder-badge .icon {width:20px;height:20px}
.hero-finder-heading label {display:block;color:#202a3d;font-size:20px;font-weight:750;line-height:1.4;letter-spacing:-.02em}
.hero-finder-heading p {margin:7px 0 0;font-size:15px;line-height:1.6;color:#536079}
#heroSearch {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;width:100%;max-width:none;margin:0;padding:16px;border:1px solid #bfb0e5;border-radius:16px;background:#fcfbff;box-shadow:none}
#heroSearch:focus-within {border-color:#633ad5;box-shadow:0 0 0 3px #ece5fc}
#heroSearch .search-symbol {display:none}
#heroSearch textarea {grid-column:1/-1;grid-row:1;order:0;width:100%;height:64px;min-height:64px;padding:4px;font-size:18px;line-height:1.6;white-space:pre-wrap;overflow-y:auto;resize:none}
#heroSearch.is-expanded textarea {min-height:104px}
#heroSearch textarea::placeholder {color:#617087;opacity:1}
#heroSearch .discovery-compose-toggle {grid-column:1;grid-row:2;justify-self:start;margin:0;min-height:44px;font-size:13px;white-space:nowrap}
#heroSearch .search-button {grid-column:2;grid-row:2;order:0;min-height:52px;height:auto;margin:0;padding:12px 20px;border-radius:12px;background:#633ad5;color:#fff;font-size:16px;box-shadow:none}
#heroSearch .search-button:hover {background:#4f2aa9}
.hero-finder .hero-examples {justify-content:flex-start;max-width:none;margin:16px 0 0;gap:8px}
.hero-finder .example-chip {min-height:44px;font-size:13px;line-height:1.4;white-space:normal}
.hero-finder .hero-examples-title {color:#536079}

.categories-section {
    padding-top: clamp(65px, 6.5vw, 105px);
    padding-bottom: clamp(66px, 6vw, 100px);
}

.featured-section {
    padding-top: clamp(55px, 5.5vw, 90px);
    padding-bottom: clamp(70px, 7vw, 115px);
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading h2 {
    font-size: clamp(29px, 2.7vw, 44px);
    line-height: 1.15;
    letter-spacing: -.05em;
    margin-bottom: 10px;
}

.section-heading p {
    font-size: 16px;
    line-height: 1.7;
    color: #64728d;
}






.credibility-section {
    padding-top: clamp(68px, 6vw, 100px);
    padding-bottom: clamp(66px, 6vw, 100px);
}

.ai-discovery {
    margin-top: 32px;
    padding-top: clamp(46px, 5vw, 76px);
    padding-bottom: clamp(46px, 5vw, 76px);
}

.service-section {
    margin-top: 28px;
    min-height: 390px;
}

.faq-section {
    padding-top: clamp(70px, 6vw, 110px);
    padding-bottom: clamp(70px, 6vw, 100px);
}





@media (max-width: 767px) {
    .hero {
        padding: 36px 21px 48px;
    }

    .hero h1 {
        font-size: clamp(37px, 8vw, 54px);
    }

    .hero .hero-description {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 25px;
    }

    .categories-section,
    .featured-section {
        padding-top: 58px;
        padding-bottom: 62px;
    }






    .section-heading h2 {
        font-size: 29px;
    }

    .section-heading p {
        font-size: 14px;
    }
}

/* Homepage category navigation: 15 readable, fully clickable cards. */
.categories-section .categories-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.categories-section .category-card {position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-content:start;gap:10px 16px;min-width:0;min-height:176px;padding:24px 28px 24px 22px;text-align:left;background:#fff;border:1px solid #dce2ed;border-radius:16px;transition:border-color .18s,box-shadow .18s}
.categories-section .category-card>.icon:first-child {grid-column:1;grid-row:1/3;width:44px;height:44px;margin:0;padding:8px;border-radius:12px;background:#f0ebfc;color:#633ad5}
.categories-section .category-card strong {grid-column:2;font-size:18px;line-height:1.4;color:#202a3d;letter-spacing:-.02em}
.categories-section .category-card>span {grid-column:2;max-width:34ch;font-size:15px;line-height:1.6;color:#536079}
.categories-section .category-card .category-card-arrow {position:absolute;right:12px;top:14px;width:16px;height:16px;margin:0;color:#633ad5}
.categories-section .category-card:hover {border-color:#9e88d8;box-shadow:0 8px 20px #28204409;transform:none}
@media(min-width:600px) and (max-width:1099px){.categories-section .categories-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:599px){
 .hero-finder {padding:18px;border-radius:20px}
 .hero-finder-heading label {font-size:18px}
 .hero-finder-heading p {font-size:14px}
 #heroSearch {padding:12px;gap:10px}
 #heroSearch textarea {font-size:16px;min-height:78px;height:78px}
 #heroSearch .search-button {font-size:14px;min-height:48px;padding:10px 14px;width:auto}
 .hero-finder .hero-examples {grid-template-columns:1fr;gap:8px}
 .hero-finder .example-chip,.hero-finder .example-chip:last-child {width:100%;max-width:none;justify-self:stretch;text-align:left;padding:10px 12px;font-size:13px}
 .hero-finder .hero-examples-title {text-align:left}
 .categories-section .categories-grid {grid-template-columns:1fr;gap:12px}
 .categories-section .category-card {min-height:126px;padding:20px 28px 20px 18px;gap:8px 14px}
 .categories-section .category-card strong {font-size:17px}
 .categories-section .category-card>span {font-size:14px}
}
@media(prefers-reduced-motion:reduce){.categories-section .category-card{transition:none;transform:none}}

/* Short desktop viewports: preserve the full discovery action above the fold. */
@media (min-width: 768px) and (max-height: 800px) {
 .hero {padding-top:24px;padding-bottom:40px}
 .hero h1 {font-size:clamp(42px,4vw,56px);line-height:1.06;margin-bottom:14px}
 .hero .hero-description {margin-bottom:18px;line-height:1.55}
}